By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,379 Members | 1,759 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,379 IT Pros & Developers. It's quick & easy.

Why is imageNormal undefined?

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
In article <be*******************@news.demon.co.uk>,
ma**@notmeyeardley.demon.co.uk says...
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


You need to make the preloaded images global. Right now they loose scope
outside your preloadImages function. Simply moving the two

var imagesNormal = new Object();
var imagesHilite = new Object();

outside ALL functions and removing them from inside the preloadImages
function "should" take care of it for you.

--

Remove NOT from email address to reply. AntiSpam in action.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.