THATBlog

You may think that's there's some complicated procedure for doing this but the answer is actually quite simple.

Most CSS layouts have background images for basic image rollovers. A lot of web browsers have a tendency to "flicker" the image to white just after the mouse enters the live area of the desired link. One way to avoid this is to preload all background images specified in CSS into the browsers cache, thus allowing the user to continue without waiting for CSS to load and cache out the image.

To preload the image(s) you'll just need to create a basic CSS id like this:

.preloadImage {display:none;}

Once that's done just create a <div> container at the bottom of your html document with all of your needed imagery.

<div class="preloadImage">

<img src="myimage.jpg" alt="My Image"/>

</div>

Because the CSS display property is set to "none" the image will not show up in the layout at all but the image itself will be loaded into the browser cache for on-demand use when the user key's your rollover. Simple yet very effective.