How to Preload Images without Javascript?

Question

In one of My Layout there are some large images (come from XML) which shown when I mouse hover on some some of the link, but when the Page loads and when i rollover It takes

Answer 1

There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad. The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }

That's all, image used you can see below:

_{(source: margonem.pl)}

Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".

This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/