Fast Rollovers Without Preload

Live Demo here
HTML code here

We've got here one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

Let's take an example

.

Usually, in CSS rollovers, we use background images in this way:

#menu a {
...
background: url("button.gif") top left no-repeat;
}
#menu a:hover {
...
background-image: url("button-over.gif");
}
#menu a:active {
...
background-image: url("button-active.gif");
}

/* etc... */

The menu items are the a-elements with display:block. Proper padding and background image for a, a:hover and a:active make the rollover.
To simplify the rollover, we can use instead only one picture containing three states of a button: normal, :hover, and :active.

When using one common picture, we don't need to change the background image. We just change its background-position. The :hover state will use the background image moved proper count of pixels (in the example the shift is 157px to the left), the :active state will use bigger shift (by 314px in the example).

#menu a {
background: url("button.gif") 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}

Then no need for a preload. When we move background position, this makes things much faster than replacing the background image. This example works in every CSS2 capable browser (IE, Mozilla, Opera, Safari etc.