Home » mono image rollovers

Mono-Image CSS Rollovers

CSS is traditionally used to create rollover effects with two or more images for menus and other elements. Menus can use on, off, or visited images to signify the state of the menu. Typically menus are created using multiple background images, however. The problem with this method is that it doubles the necessary HTTP requests and can cause flickering problems when the “off” image is not preloaded. A better way is to combine the on and off state images into one mini-sprite and switch the background position on rollover (see Figure 1).

Read more