Search code examples
javascriptarraysimagerolloverrollovers

Rollover calling image from array

Working on a webpage where I would like multiple rollovers from the same base image (multiple black pixels distributed throughout the page - kind of like a popup effect). I figure the easiest way to do this is to have an array with all the rollover images and an array with the base image (pixel.png). Had lots of trouble even getting the images to display, and now that I have the background image displaying, I cannot get the rollover to work. Have tried trouble shooting in chrome using developer/debug but no dice - doesn't even show an error message. I'm guessing it's something simple like not calling the functions properly but I just can't see it..

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
            var revert = new Array('pixel.png');
            var inames = new Array('black1off.jpg', 'black2off.jpeg');

         //preload
            if (document.images) {
                var flipped = new Array();
                  for(i=0; i< inames.length; i++) {
                        flipped[i] = new Image();
                        flipped[i] = "media/"+inames[i];
                      }
                    }

            function over(num) {
              if(document.images) {
                revert[num] = document.images[inames[num]];
                document.images[inames[num]] = flipped[num];
              }
            }
            function out(num) {
              if(document.images) {
                document.images[inames[num]] = revert[num];
             }              
            }

 </script>
 </head>
 <body>
 <body bgcolor="#000000">

    <img src="media/pixel.png" name="pixel" height="50px" width="50px" style="position:absolute; top:30px; left:50px;" onMouseOver="over(0)" onMouseOut="out(0)">
    <img src="media/pixel.png" name="pixel" height="50px" width="50px" style="position:absolute; top:30px; left:200px;" onMouseOver="over(1)" onMouseOut="out(1)"> 
  </body>
  </html>
Solution

  • It is simple but what you've posted was not even close:

    Here's the working example: https://jsfiddle.net/tqw84trm/1/

    if (document.images) {
  var flipped = new Array();
  for(i=0; i< inames.length; i++) {
    flipped[i] = new Image();
    flipped[i].src = "media/"+inames[i];
  }
}

function out (num) {
  if(document.images) {
    var rev = revert.slice();
    revert[num] = document.images[num].src;
    document.images[num].src = rev[num];
  }              
}