I am a: Quirky sysadmin. Geek. Gamer. Comic fangirl. My little space, my home on the interwebs. I blog about personal stuffs, work, various coding projects, and anything else I feel like.

Most anyone who’s been messing around with webpages and HTML over the past few years I’m sure is familiar with the concept of pre-loading images. If you have a rollover effect (for instance, mouseover effects on a menu bar), it makes good sense to pre-load your images so that the effect shows up immediately when your visitor moves their cursor over the image/object. For a long time, the most popular way to accomplish this was by adding javascript to your HEAD section and an onload snippet to your BODY tag.

There is a much easier way to do this with CSS. I had ran across this a long time ago, but never bookmarked the link.

Bad designer, BAD!

Luckily, I ran across it again recently and thought I’d post it here in case anyone else was interested in how to do this.

In your stylesheet, add the following:

.hiddenpic {display:none;}

Then add your image that you want pre-loaded just following the </HEAD> tag. For example:

<img src="/images/navhover.gif" alt="" class="hiddenPic" />

OR, you could put several images inside a DIV:

<div class="hiddenPic"><img src="/images/hover1.gif" alt="" /> <img src="/images/hover2.gif" alt="" /> <img src="/images/hover3.gif" alt="" /></div>

Just keep in mind that these images will load before you page does, so don’t overdo it with HUGE images!