Pre Loading Images with CSS
In order to get a smooth rollover effect with your images you need some way of having them available and ready to be used. You don't want your visitors to hover over an image and wait for something to happen. It needs to be almost instant.
Generally you would be using this method to pre-load small navigational icons or something similar. You would not normally be pre-loading huge image files as it would make you page load times considerable longer.
Here is an example of a navigation menu using different background images on hover.
The icons used in this example are originally from FamFamFam and are a great set of free icons. I have modified the originals to include a grey-scale version and converted to gif, so as to display correctly in IE.
Here is an example of a larger image that changes on hover. Once again the images are background images defined in CSS.
The images in this example are copyright NZ Digital Images