JavaScript Rollover problems

[gatohoser]

I'm trying to fix up a couple year old website I made to post on a portfolio website and need to fix a JavaScript bug in the rollover. Basically, the rollovers aren't working! Here's the code:

    
    var menuImages = new Array(6);

    if (document.images) {
      var ImgOver = new Array();
      ImgOver[0] = new Image;
      ImgOver[1] = new Image;
      ImgOver[2] = new Image;
      ImgOver[3] = new Image;
      ImgOver[4] = new Image;
      ImgOver[5] = new Image;
      ImgOver[0].src = "images/newHomeOver.png";
      ImgOver[1].src = "images/newProductsOver.png";
      ImgOver[2].src = "images/newSizingOver.png";
      ImgOver[3].src = "images/newContractorsOver.png";
      ImgOver[4].src = "images/newAboutOver.png";
      ImgOver[5].src = "images/newContactOver.png";

      var ImgOut = new Array();
      ImgOut[0] = new Image;
      ImgOut[1] = new Image;
      ImgOut[2] = new Image;
      ImgOut[3] = new Image;
      ImgOut[4] = new Image;
      ImgOut[5] = new Image;
      ImgOut[0].src = "images/newHomeOut.png";
      ImgOut[1].src = "images/newProductsOut.png";
      ImgOut[2].src = "images/newSizingOut.png";
      ImgOut[3].src = "images/newContractorsOut.png";
      ImgOut[4].src = "images/newAboutOut.png";
      ImgOut[5].src = "images/newContactOut.png";
    }


  function rollOver(i) {
      alert(i);
      if (document.images) {
		  alert("startover" + menuImages[i].src);		  
		  menuImages[i].src = ImgOver[i].src;
  		  alert("endover" + menuImages[i].src);
	  }
    }

    function rollOut(i) {
		
      if (document.images){
		  alert("startout" + menuImages[i].src);		  
		  menuImages[i].src = ImgOut[i].src;
		  alert("endout" + menuImages[i].src);
	  }
    }

    function menuInit() {
      menuImages[0] = document.getElementById("homeButtonPic");
      menuImages[1] = document.getElementById("productsButtonPic");
      menuImages[2] = document.getElementById("toolsButtonPic");
      menuImages[3] = document.getElementById("contractorsButtonPic");
      menuImages[4] = document.getElementById("aboutusButtonPic");
      menuImages[5] = document.getElementById("contactusButtonPic");	  

      for (i = 0; i < menuImages.length; i++) {	
        menuImages[i].onmouseover = function() {rollOver(i)};
        menuImages[i].onmouseout = function() {rollOut(i)};
      }

What's happening is that every time the rollover function is alerting "6". Meaning that the for loop is not working as I intended. Somehow or another i is equal to 6 for all menuImages somehow. I'm sure it's just something I don't understand about JavaScript. Any ideas?

[JMRKER]

Change: var menuImages = new Array(6);
to: var menuImages = new Array(5);

You only have 6 images, but it is zero-indexed (starts at 0) which is a true length of 6
(0,1,2,3,4,5)

With the "menuImages" defined as 6 elements, you are not assigning anything to the final element.

[gatohoser]

I actually do use the 6th element if you look again so I am using all 6 elements. The problem though is that I wouldn't want it setting every element to 6 when I rollover which it is. To be clear, no matter where I mouseover, the i that comes into rollover() is an i = 6. That's not what I would like. I would like the i to match whatever element index it is that I am rolling over.

[Tcobb]

I don't know that this is the problem, but, look at your code in your function 'menuInit()'. In that function the 'i' variable was not declared as in 'var i'. In effect, you've created a global variable that at the end of the loop will indeed be equal to 6. I suspect that this might be the problem. I don't know--I have not tried to duplicate your code, and I really don't know if the variable name given to an argument of a function will override the value given to a global variable of the same name.

Its just a thought....

[Kor]

for (i = 0; i < menuImages.length; i++) {
menuImages[i].int=i;//creates a custom property
menuImages[i].onmouseover = function() {rollOver(this.int)};
menuImages[i].onmouseout = function() {rollOut(this.int)};
}

But I guess you have used a much too complicated code. A single function should be enough

<script type="text/javascript">
function menuInit(){
var id=['homeButtonPic','productsButtonPic','toolsButtonPic','contractorsButtonPic','aboutusButtonPic','contactusButtonPic'], i=0, img;
while(img=document.getElementById(id[i++])){
img.onmouseover=function(){this.src=this.src.replace(/Out/,'Over')}
img.onmouseout=function(){this.src=this.src.replace(/Over/,'Out')}
}
}
onload=menuInit;
</script>

That would be all. Nothing more.

[JMRKER]

I actually do use the 6th element if you look again so I am using all 6 elements. The problem though is that I wouldn't want it setting every element to 6 when I rollover which it is. To be clear, no matter where I mouseover, the i that comes into rollover() is an i = 6. That's not what I would like. I would like the i to match whatever element index it is that I am rolling over.

Try the following in your original menuInit() function:

  alert('Number of elements: '+menuImages.length);
      for (i = 0; i < menuImages.length; i++) {	
 alert('Element: '+i+' of: '+menuImages.length+' is '+menuImages[i].src);
  ...

What do you get for the last element of the loop?

[Kor]

JMRKER, that is an old, well known tricky catch. When you use a loop to attach en event to an element, the process took place, in fact, after the loop ends, thus if you want to use the index of the loop somehow within that function fired by that event, it will take the last value for all the elements. For instance:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload=function(){
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
	divs[i].onclick=function(){alert(i)} // will alert 3 for all the elements, as the last i=3 (the length of the collection)
}
}
</script>
</head>
<body>
<div>click me</div>
<div>click me</div>
<div>click me</div>
</body>
</html>

There are several ways to solve that. One of them is to stick that index as a custom property of the element, and use a closure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload=function(){
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
	divs[i].ind=i;
	divs[i].onclick=function(){alert(this.ind)}
}
}
</script>
</head>
<body>
<div>click me</div>
<div>click me</div>
<div>click me</div>
</body>
</html>

[gatohoser]

Thanks, Kor! That solved it. Sorry to take a while to get back to it. I'm going to look into that less complicated code, too. Thanks!