Heck, you can even attach background elements to each other depending on the specific uses.

Nav Bars on Steroids In Semantic and Gorgeous Navigation Bars I explained the method I use for creating [...]

Say you have 3 images, all 100 pixels by 40 pixels – one for normal, one for hover, and one for selected. Ok, instead of having 3 images and preloading them via javascript and changing them via css you just use one image, in this case it would be 300px by 40px with all three images laying side by side (say, in the order of above – normal, hover, on).

Now, in your css you just say something like the following to hide the text:

a#yourLink span {
display:none;
}

or … if you want to be really accessible you could say:

a#yourLink span {
position:absolute;
width:100px;
margin-left:-5000px;
}

Because display:none means it won’t be read by screen readers, but if you absolutely position it off the screen it will be hidden, but still “there”

Anyway, now you define your anchors using a window smaller than the actual image, in order to display just part of it. :

a#yourLink {
display:block;
width:100px;
height:40px;
background image: url(yourImage.gif);
background-position: top left;
}

Now for the hover you can change the background position (indicated here by vertical and then horizontal values). You are basically telling the background image to be moved 100 pixels to the left so that the “second” image is revealed in your window:

a#yourLink:hover {
background:position: -100px 0;
}

Now for the final “on” state:

a#yourLink.on {
background-position:-200px 0;
}

Make sense?

First of all, thank you for providing inspiration. Your enthusiasm is addictive.

Could you spare a few moments to explain David’s suggestion. I can’t quite get my head around it.

Example can be seen here. (Note that this site is still in progress.)

Firefox is nice here. You can simply use Ctrl+F5 or Ctrl+Shift+R to override the cache.

Bottom line – it’s mostly web designers who get this flickering. Any of the suggested methods will get rid of it. That’s assuming you don’t want to annoy web designers … ;-)

Here are two more links with good looking solutions I’m investigating.

1: http://www.fivesevensix.com/studies/ie6flicker/
2: http://wellstyled.com/css-nopreload-rollovers.html

See this explanation and solution from Dean Edwards.