PDA

View Full Version : Help with image roll over script please



phill_ridout
Sep 15th, 2007, 12:48 AM
I have written the below script, but i am stuck on the last hurdle!

I am getting the following two errors:


Error: preLoadImg is not defined
Source File: file:///C:/test.htm
Line: 9

Error: preLoadImg is not defined
Source File: file:///C:/test.htm
Line: 16


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.


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

function mouseOver()

{

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

}

function mouseOut()
{

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

}

function afterInit()
{
var imgTags = document.getElementsByTagName("img") // Find all img tags

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");

var preLoadImg = new Array();

if (relAttr == "easyRoll") {
imgTags[i].onmouseover = mouseOver;
imgTags[i].onmouseout = mouseOut;

preLoadImg[imgTags[i].id] = new Array();

// Load the images in to an array, get the defualt images from the src of the relevant img tags, get the over image by changing the 0 to a 1

preLoadImg[imgTags[i].id]["defualt"] = new Image();
preLoadImg[imgTags[i].id]["defualt"].src = imgTags[i].src
preLoadImg[imgTags[i].id]["over"] = new Image();
preLoadImg[imgTags[i].id]["over"].src = imgTags[i].src.replace("0.", "1.")

}
}

}


</script>

<body>
<a href="index.htm"><img id="btn_home" src="images/btn_hom0.gif" alt="Home" rel="easyRoll" /></a>
<a href="index.htm"><img id="btn_stor" src="images/btn_sto0.gif" alt="Store" rel="easyRoll" /></a>
<a href="index.htm"><img id="test" src="images/btn_sto0.gif" alt="Store" /></a>
<script>
afterInit()



</script>
</body>
</html>

chump2877
Sep 15th, 2007, 01:44 AM
Try something like this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<a href="index.htm"><img id="btn_home" src="myImage_off.jpg" alt="Home" rel="easyRoll" /></a>
<a href="index.htm"><img id="btn_stor" src="myImage2_off.jpg" alt="Store" rel="easyRoll" /></a>
<script type="text/javascript">
afterInit();
function attachMouseEvents(imgObj)
{
imgObj.onmouseover = function()
{
this.src = this.src.replace(/_off/,"_on");
};
imgObj.onmouseout = function()
{
this.src = this.src.replace(/_on/,"_off");
};
}
function afterInit()
{
// Find all img tags
var imgTags = document.getElementsByTagName("img");
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");
var preload_image_object = new Image();
if (relAttr == "easyRoll")
{
preload_image_object.src = imgTags[i].src;
preload_image_object.src = imgTags[i].src.replace(/_off/,"_on");
attachMouseEvents(imgTags[i]);
}
}
}
</script>
</body>
</html>


The naming convention for images is as follows:

Onmouseover --> myImage_on.jpg
Onmouseout --> myImage_off.jpg

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)

function afterInit()
{
var imgTags = document.getElementsByTagName("img") // Find all img tags

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") {
imgTags[i].onmouseover = mouseOver;
imgTags[i].onmouseout = mouseOut;

preLoadImg[imgTags[i].id] = new Array();

// Load the images in to an array, get the defualt images from the src of the relevant img tags, get the over image by changing the 0 to a 1

preLoadImg[imgTags[i].id]["defualt"] = new Image();
preLoadImg[imgTags[i].id]["defualt"].src = imgTags[i].src
preLoadImg[imgTags[i].id]["over"] = new Image();
preLoadImg[imgTags[i].id]["over"].src = imgTags[i].src.replace("One.", "Two.")

}
}

}


</script>

<body onload="afterInit()">
<a href="index.htm"><img id="btn_home" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Home" rel="easyRoll" /></a>
<a href="index.htm"><img id="btn_stor" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Store" rel="easyRoll" /></a>
<a href="index.htm"><img id="test" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Store" /></a>
<script>
afterInit()



</script>
</body>
</html>

chump2877
Sep 15th, 2007, 05:04 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?

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

Revised afterInit() function:


function afterInit()
{
// Find all img tags
var imgTags = document.getElementsByTagName("img");

// create new, generic image object in document solely for purpose of preloading images
var preload_image_object = new Image();

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]);
}
}
}