Hi-Fi Design with CSS: CSS Rollovers - The Single Image Theory

CSS Rollovers - The Single Image Theory

If a separate image is used for the hover state, a delay in the rollover effect may occur as the browser downloads the extra image.
Solution:
- Use one background image containing both states:
  Image is 30 x 60
- Restrict the revealed portion of image.
  display:block; width:30px; height:30px;
- Manipulate the portion showing by using background-position.
  background-position:0 -30px;
- For more details, see Fast rollovers, no preload
  http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers