preloading images for mouseover

[Sul]

Hi

I'm trying to preload some images so that there is no delay on mouseover. However, my script doesn't seem to be working. I'm using one similar to the one on javascriptsource.com, can someone quickly point me in the right direction or give me some example code?

Thank you.

[pyro]

Perhaps if you post your code, we can tell you what is wrong with it.

[Sul]

Here is the code:

<script language="JavaScript">
newsover = new Image();
newsover.src = "../images/navigation/navigation_over_06.jpg";

forumsover = new Image();
forumsover.src = "../images/navigation/navigation_over_07.jpg";

eventsover = new Image();
eventsover.src = "../images/navigation/navigation_over_08.jpg";

resourcesover = new Image();
resourcesover.src = "../images/navigation/navigation_over_09.jpg";

gutedover = new Image();
gutedover.src = "../images/navigation/navigation_over_10.jpg";

contactover = new Image();
contactover.src = "../images/navigation/navigation_over_11.jpg";
</script>

Also I've put the mouseover and mouseout statements in the anchor (<a>) tag, should it be in the image (<img>) tag to work?

[pyro]

And the mouseover code and perhaps a link to where this problem is visible?

[Sul]

Please see my post above - I edited it just now.

[pyro]

No, they can stay in the <a> tag. Can we see what you did for those, please?

[Sul]

<a href="forum" target="mainFrame" onmouseover="forumsover.src = 'images/navigation/navigation_over_07.jpg';window.status='::Forums::';return true" onmouseout="forumsover.src = 'images/navigation/navigation_07.jpg';window.status='';return true"><IMG SRC="images/navigation/navigation_07.jpg" ALT="" name="forumsover" WIDTH=79 HEIGHT=28 border="0">

Here is the code for the mouse events.

[pyro]

And therein lies your problem. You are not calling the images that you just preloaded. Try it like this:

<a href="forum" target="mainFrame" onmouseover="this.src = forumsover.src';window.status='::Forums::';return true" onmouseout="this.src = 'images/navigation/navigation_07.jpg';window.status='';return true"><img src="images/navigation/navigation_07.jpg" alt="" name="forumsover" width="79" height="28" border="0">

[Sul]

Thank you, problem has been resolved. I replaced this.src with the name of the image, and it works perfectly. I see how the code works as well now. Thanks again.

[pyro]

Yes, my mistake with the this. I forgot that it was in the <a> tag rather than the <img> tag... Anyway, glad it's working for you.