The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

The best way is to not use separate images for the hover. If you combine the normal and hover states like the sample image attached here, your normal state will have background-position:left top;, and the hover state background-position:left bottom;. This saves all the hover state css, as only one a:hover needs to be defined.

Ok. I see what you mean... You want the images to load before the user hovers over the navigation elements.

I'd consider putting the background images as <img> tags in the list items, then setting the display style to "none". The other thing you could do as an exnhancement to that solution is use the createElement method to load the images instead of having them in HTML when they aren't necessary.

I've never tried any of these methods myself, but in theory, they should work.

But ... what Centauri said is probably the best overall approach, because then you don't need to do anything to cache anything. That technique is sometimes referred to as "CSS sprites", and was pioneered by Petr Stan&#237;ček [aka -pixy-] -- http://wellstyled.com/css-nopreload-rollovers.html