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