Image Preloader

[admin]

I have a problem with a mouseover in a cell that I have on my site. The scripts involved are below. The mouseover works, but it takes about half a second to load the image, which really ruins it. Does anyone know of a way that I can preload the images so that the mouseover works instantly.<br />
<br />
Here is the HTML:<br />
<td class="a" onmouseover="this.className='b';" onmouseout="this.className='a'><td><br />
<br />
And in an external css document is the following:<br />
td.a { background-image:url('menu_bg.gif'); }<br />
td.b { background-image:url('menu_bg2.gif'); }<br />
<br />
Thanks<br />
Mitchell<!--content-->Try something like this:<br />
<script type="text/javascript"><br />
var img = new Image();<br />
img.src = 'http://www.webdeveloper.com/forum/archive/index.php/menu_bg.gif';<br />
</script><br />
<br />
Adam<!--content-->I couldnt get it to work. Does anyone else know of anything?<br />
<br />
PS. Cool Quote. I code in XHTML1.1<!--content-->That is the basic method for JavaScript preloading, though you can also preload in HTML using an invisible <img> tag containing a reference to the image. Bear in mind that this is not a magic solution - it still may take too long depending on the size of the image.<br />
<br />
For more information, see this thread: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=219653">http://www.webdeveloper.com/forum/showt ... tid=219653</a><!-- m --><br />
<br />
Adam<!--content-->