Single Image CSS Rollovers

By Deane Barker on September 13, 2004

Fast Rollovers Without Preload: Here’s a devious little trick for CSS-based image rollovers.

Use one image that’s bigger than the area in which you want to display it. The image has three different “areas” and you use CSS to “move” the image up and down (or side to side) to display the part of the image you want. The result is a three-state CSS rollover using only one image and no preload.

Ideas like this just reinforce the fact that, relatively speaking, I suck.