Preload images

[liunx]

How do I get my page to preload my images? I have a rollover script on my page. I have some regular button images and then some button images that are displayed when you move the mouse over that button. But only the regular images are loaded; when i mouse over each button the first time the image for that button need to be uploaded at THAT moment (but after the first time it works fine). I want the images to be pre-loaded, but how on earth do I program this?<br />
<br />
Check my page (it's Norwegian, but of course the code isn't) at home.no.net/xmedia and try to move the mouse over yourself and you know what I mean.<br />
<br />
I appreciate any input here. Plz help me out.<!--content-->Well the first thing is compression. You may wish to reduce the size of the images. <br />
<br />
Other than that, do you prefer a css or javascript solution?<br />
<br />
CSS is easy. just insert the rollover image at the bottom of the page:<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"something.jpg" width="100px" height="20px;" ... style="display:none;" /><br />
<br />
The image is then Download <!--more-->ed to the cache, and is called from the cache to give a fast rollover.<!--content-->if(document.images){<br />
var myImage = new Image();<br />
myImage.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"myimage.gif"<br />
}<br />
<br />
the above will preload the image<!--content-->and that's the javascript solution lol. <br />
<br />
We must have pushed the post button at the same time- my page loaded with both posts!<!--content-->I want to load several images, so you just do like below, for example?<br />
<br />
if(document.images){ <br />
var myImage = new Image(); <br />
myImage.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"myimage1.gif" <br />
}<br />
if(document.images){ <br />
var myImage = new Image(); <br />
myImage.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"myimage2.gif" <br />
}<br />
if(document.images){ <br />
var myImage = new Image(); <br />
myImage.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"myimage3.gif" <br />
}<br />
<br />
And where in the document should the code be located?<!--content-->In that cas eyou will need a unique image name<br />
myImage 1<br />
myImage 2<br />
....etc<!--content-->