www.webdeveloper.com
Results 1 to 8 of 8

Thread: JavaScript Rollover problems

  1. #1
    Join Date
    Jan 2010
    Posts
    10

    JavaScript Rollover problems

    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:
    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?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    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.

  3. #3
    Join Date
    Jan 2010
    Posts
    10
    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.

  4. #4
    Join Date
    Mar 2009
    Posts
    521
    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....
    Last edited by Tcobb; 01-12-2011 at 01:26 AM.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    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
    Code:
    <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.
    Last edited by Kor; 01-12-2011 at 07:30 AM.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Arrow

    Quote Originally Posted by gatohoser View Post
    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:
    Code:
      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?

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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:
    Code:
    <!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:
    Code:
    <!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>

  8. #8
    Join Date
    Jan 2010
    Posts
    10
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles