M
Mark Anderson
This is driving me crazy - I'm following through some basic rollover code
(below with all extra content stuff stripped away. When I mouseover the
image, IE errors, reporting "imagesHilite is undefined". Why?
I've used the rem'ed out alert to prove the preLoad code runs and the mouse
events pass the expected 'type' argument. Anyone show what I'm doing wrong?
######### code starts #########
<html><head><title>Image Swap Test</title>
<script language="JavaScript" type="text/JavaScript">
function preloadImages() {
if (document.images) {
var imagesNormal = new Object();
imagesNormal["home"] = new Image(130, 20);
imagesNormal["home"].src = 'images/homenav1.gif';
var imagesHilite = new Object();
imagesHilite["home"] = new Image(130, 20);
imagesHilite["home"].src = 'images/homenav2.gif';
//alert(imagesNormal["home"].src + ' | ' +
imagesHilite["home"].src);
}
}
function setImage(type) {
if (document.images) {
if (type == 'hilite') {
document.images['home'].src = imagesHilite['home'].src;
//alert('hilite');
return true;
} else if (type == 'normal') {
document.images['home'].src = imagesNormal['home'].src;
//alert('normal');
return true;
}
}
return false;
}
</script></head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="preloadImages();"
leftmargin="0" topmargin="0">
<a href="home.htm" onmouseover="return setImage('hilite');"
onmouseout="return setImage('normal');"><img name="home" height="20"
width="130" border="0" src="images/homenav1.gif" alt="Home Page"></a>
</body>
</html>
#### code ends ###########
Thanks,
Mark
(below with all extra content stuff stripped away. When I mouseover the
image, IE errors, reporting "imagesHilite is undefined". Why?
I've used the rem'ed out alert to prove the preLoad code runs and the mouse
events pass the expected 'type' argument. Anyone show what I'm doing wrong?
######### code starts #########
<html><head><title>Image Swap Test</title>
<script language="JavaScript" type="text/JavaScript">
function preloadImages() {
if (document.images) {
var imagesNormal = new Object();
imagesNormal["home"] = new Image(130, 20);
imagesNormal["home"].src = 'images/homenav1.gif';
var imagesHilite = new Object();
imagesHilite["home"] = new Image(130, 20);
imagesHilite["home"].src = 'images/homenav2.gif';
//alert(imagesNormal["home"].src + ' | ' +
imagesHilite["home"].src);
}
}
function setImage(type) {
if (document.images) {
if (type == 'hilite') {
document.images['home'].src = imagesHilite['home'].src;
//alert('hilite');
return true;
} else if (type == 'normal') {
document.images['home'].src = imagesNormal['home'].src;
//alert('normal');
return true;
}
}
return false;
}
</script></head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="preloadImages();"
leftmargin="0" topmargin="0">
<a href="home.htm" onmouseover="return setImage('hilite');"
onmouseout="return setImage('normal');"><img name="home" height="20"
width="130" border="0" src="images/homenav1.gif" alt="Home Page"></a>
</body>
</html>
#### code ends ###########
Thanks,
Mark