Web Design in a Nutshell, 3rd Edition

Rollovers without preloading

Another popular method for handling image rollovers is known as the “Pixy No-Preload Rollover” technique introduced by Petr Staníek (aka “Pixy”) in his article “Fast Rollovers without Preload” (http://wellstyled.com/css-nopreload-rollovers.html). In this method, all the rollover states are placed in one image, and only the background-position is changed for each link state. This avoids the need to load or preload multiple images for each rollover and can speed up display.

Figure 24-14 shows the image that contains both the default background image and the hover state. The style rule shifts the position of the initial background image down by the height of the element, revealing the appropriate portion of the image.

    a { display: block;
        width: 150px;
        height: 30px;background: url(allbuttons.gif) top left no-repeat #666; }
     
    a:hover {background url(allbuttons.gif) 30px left no-repeat #eee; }

Figure 24-14. Containing all rollover states in one image

Warning

Applying background images and rollovers can cause a flickering effect in Internet Explorer on Windows. One solution is to apply the background image to both the link (a) and its containing element. For an in-depth look at this problem and possible solutions, see the article, “Minimize Flickering CSS Background Images in IE6” by Ryan Carver at http://www.fivesevensix.com/studies/ie6flicker/.