I'm guessing its to do with local and global variables. Could some one help please.

Also is there a more gracefull way for having the afterInit() function to run after the page has loaded. I plan to put the Javascript in to a js file when it all works tickity boo, and this would realy neaten it up.

The images don;t have to be in jpg format...they can be any format as long as they use the _on and _off suffixes, and the root part of the name (myImage) stays the same for both mouseover and mouseout...

Also, everything in the current script block can be put into an external file and included, and it will work the same...

phill_ridout

Sep 15th, 2007, 12:17 PM

call me stupid, but i cant see where it loads the preloaded image in to the actual image! Could some one explain that please, at the moment i assuming that it doesnt matter, caus using the new Image() causes the browser to cache the image, meaning that you do not need to directly refrence it! Is that correct?

Also i noticed you used myImage2_off.jpg as an image name do you not need to stick to the 8.3 file name convention?

vwphillips

Sep 15th, 2007, 01:20 PM

<html>
<head>
<script type="text/javascript">

function mouseOver()

{

this.src = preLoadImg[this.id]["over"].src

}

function mouseOut()
{

this.src = preLoadImg[this.id]["defualt"].src

}
var preLoadImg = new Array(); // This neens to be global( defined outside a function)

call me stupid, but i cant see where it loads the preloaded image in to the actual image! Could some one explain that please, at the moment i assuming that it doesnt matter, caus using the new Image() causes the browser to cache the image, meaning that you do not need to directly refrence it! Is that correct?

Also i noticed you used myImage2_off.jpg as an image name do you not need to stick to the 8.3 file name convention?

You're not "required" to stick to any naming convention for the naming of files (aside from creating valid file system names)...If you want to use your own file naming convention, then thats fine....I've never heard of the 8.3 file name convention...

Also, I just noticed that you can omit this line in afterInit():

preload_image_object.src = imgTags[i].src;

The original images are already hardcoded in the markup, so you don;t need to preload them...you only need to preload the mouseover images...That was my oversight

for (var i = 0; i < imgTags.length; i++)
{
//Loop through the array looking for images that has easyRoll in the rel attribute
var relAttr = imgTags[i].getAttribute("rel");
if (relAttr == "easyRoll")
{
// Assigning the src property of the new image object effectively preloads the image
// Each time you assign a new src property (even to the same image object) it causes the page to load the image into memory
preload_image_object.src = imgTags[i].src.replace(/_off/,"_on");
attachMouseEvents(imgTags[i]);
}
}
}