Calendar Mail Remote Contacts Videos Photos Notes Calculator Clock Weather Maps Stocks YouTube Camera AppStore Settings
Phone Text Safari Music

In this demo, the main area at the top has freeform orientation, so the icons can move freely in two dimensions, but the group of four icons at the bottom is more restricted, and can only move horizontally within that group.

The icons are also form controls — image inputs — which have a transparent gif as their src and then the icon implemented as a CSS background image. This does make for rather bulky CSS, but the reason for doing it, rather than simply loading the icon into the input, is so that we can override the background with an AlphaImageLoader for IE6.

'Course, if I had absolute choice, I wouldn't have bothered with IE6 at all; but people are still using it — lots of people — so we have to keep supporting it for the foreseeable future.

Also note that in this case the image inputs have no alt text; they don't need it because they have text labels underneath that serve the same purpose.

The icons themselves come from louiemantia.com