The background image used on
the menu links
long image with all the frames of the animation

Animated Menu thingies

Run your mouse over the menu items to the left.

I read about CSS rollover menus in the excellent book The CSS Anthology: 101 Essential Tips, Tricks and Hacks by Rachel Andrew, who in turn credits wellstyled.com. Essentially, the technique combines three images into one, and this image is used for the background of a link. Only one part of the image can be seen at any one time. Hovering over or clicking on a link causes the background image to move, revealing another part of the image - and changing the appearance of the link. This technique is nice and clean in that it relies purely on CSS; there's no Javascript involved. It's a great way of duplicating the old "rollover image" trick, without the mess of swapping between images, etc.

I wanted something a bit more ooooh-must-play-with, though. It occurred to me that if I moved the background image several times I could run a short animation. It wasn't going to happen in pure CSS, I'd need some Javascript, but hopefully the results would be worth it.

What you see here is the result of an evening's work. The onmouseover event fires a function to make the background image move up at set intervals, bringing each frame into view in turn, until the last frame (the bright light) is showing. The onmouseout event does the same thing, making the image slide down.

It's still a little flaky - every so often the little lights just disappear instead of lighting up, but they come back again as soon as you put the mouse over them. This probably means that the background image is sliding one notch too far. When I get time I'll tighten that up.

Overall, I'm quite pleased with this. I'm sure it's nothing new or revolutionary, but I'm happy to have made it work.

Tested in IE6 and Firefox 1.0.6 under Windows 2000. Post here with results in other browsers - thanks!

Update 19th Sept 2005: Neil tested it in Firefox 1.0.6 and Konqueror 3.4.2, on Fedora Core 3 Linux. He reports that it degrades nicely in Lynx 2.8.5 (text-only browser). But Netscape 4.78 on Solaris "mangles it".

Update 20th Sept 2005: Added bounds checking to prevent animation winding back too far - appears to have fixed the "disappearing lights" problem. Added media="all" to CSS declaration - this should trip Netscape up and leave us with an unstyled document, since Netscape 4 is so abysmal at anything CSS.