Preloading images

Answer 1

I would do some research into CSS sprites, it will negate the need to preload your images and it will make your page load times go much faster. A List Apart has a good article on CSS sprites.

If you really wanted to preload that one image you can create a really tiny pixel with a background of the image you wanted to hover over, it's not a very elegant solution but it would do the job.

#preload
{
    background-image:url(../images/today-over.png);
    width:1px;
    height:1px;
    position:absolute;
}

And then on your page:

<div id="preload"></div>

Answer 2

I suppose you could make your browser preload those images, if you would place them on a hidden div on your page, like this:

<div style="display:none;"> ... the images ... </div>

Answer 3

thanks for ur replies guys.. i found a way to reload all the images using jquery here: http://www.filamentgroup.com/lab/update%5Fautomatically%5Fpreload%5Fimages%5Ffrom%5Fcss%5Fwith%5Fjquery/

Answer 4

As Sam152 said, you should use CSS sprites. This will solve your problem as well as cutting down on HTTP requests.

The simple way is instead of today.png and today-over.png put them into one image, one above the other, that is 98px by 50px. Then use this CSS:

#nav .Today a {
    background: transparent url(../images/today.png) no-repeat scroll left top;
}
#nav .Today .Active {
    background-position: left bottom;
}

Note: I removed the other styles to keep this looking clean, but keep those in your code!

The more advanced, and generally better, way is to merge all the menu images into one, so you only have one image to load. You'd have a 490x50 image, and CSS like this:

#nav .Today a {
    background: transparent url(../images/today.png) no-repeat scroll 0 0;
}
#nav .Today a.Active {
    background-position: 0 -25px;
}
#nav .Hot a {
    background: transparent url(../images/hot.png) no-repeat scroll -98px 0;
}
#nav .Hot a.Active {
    background-position: -98px -25px;
}

...and so on.