Need help with rollover script that almost works

[Brodie]

Hello. I am trying to write a rollover script that will accomplish a couple of things.

I want to detect the image for a menu option that is currently "on" and capture it in a variable as the "default" image. When the user mouses over another menu option, I want the default image to be turned off and the new image turned on. Basic rollover stuff. But, when the user mouses out, I want the default image restored.

Below is what I have done so far. It works in Netscape 4, without error. In IE 5, it gives me the error 'document.images[...].src is not an object'. If I clear the error, it works properly. This is happening only on pages where there is no "default" image defined, such as the main page where no menu items have yet been selected. I am sure that I am missing something simple, and I'm sure there is a better way to accomplish this. Any help is much appreciated.


<!-- This code is located at the top of the page. It takes the passed variables and swaps the images. -->
var Image1_Off = new Image(139,19);
Image1_Off.src = "/Images/Image_Off.gif";
var Image1_On = new Image(139,19);
Image1_On.src = "/Images/Image_On.gif";
var Image2_Off = new Image(139,19);
Image2_Off.src = "/Images/Image2_Off.gif";
var Image2_On = new Image(139,19);
Image2_On.src = "/Images/Image2_On.gif";

function rollImage(theImage, theAction) {
var newImage = theImage.name;
if (theAction == 1) {
if (defaultImage != "") {
document[defaultImage].src = eval(defaultImage + "_Off.src");
}
document[newImage].src = eval(newImage + "_On.src");
}
if (theAction == 0) {
document[newImage].src = eval(newImage + "_Off.src");
if (defaultImage != "") {
document[defaultImage].src = eval(defaultImage + "_On.src");
}
}
}


<!-- This code is located at the bottom of the page. It loops through all images, looking for the active one. Not very pretty, but it works. -->
var defaultImage = "";
for (i = 0; i <= document.images.length; i++) {
if (document.images[i].src.indexOf("_On.gif") > -1) {
defaultImage = document.images[i].name;
break;
}
}


<!-- This is a couple of menu items. It passes the variables to the script. -->
<A HREF="/"><IMG NAME="Image1" SRC="/Images/Image1_On.gif" WIDTH="139" HEIGHT="19" BORDER="0" ALT="Image1">
<A HREF="/" onMouseOver="rollImage(Image2,1)" onMouseOut="rollImage(Image2,0)"><IMG NAME="Image2" SRC="/Images/Image2_Off.gif" WIDTH="139" HEIGHT="19" BORDER="0" ALT="Image2">

[adios]

for (i = 0; i <= document.images.length; i++) {

When looping through JS arrays, remember: Array.length is always one greater than the index of the last element.

[Brodie]

Boy, it's amazing how important one little equal sign can be. I just knew I was overlooking something silly. Everything is working properly, now, though I can't help feeling like there is a better way to do this. Thank you so much for the help!