Multiple Rollover of Image

Discussion in 'JavaScript' started by haroon_shah, Apr 23, 2008.

  1. #1
    Hi,
    Below is the code where when i do mouseover it changes to 2nd image

    but my query is to see more images when i do mouse over means lets say i have 5 images and when i do mouse over on e.g. car1.jpg it should change to all those images continously until i remove the mouse from that image.

    As i Know i need a loop but i tried few and it doesnt work..can somebody please ammend the below code so i can have more then 2 images to be viewed

    
    <html>
    <head>
    <script type="text/javascript">
    var revert = new Array();
    var inames = new Array('car');
    
    // Preload
    if (document.images) {
      var flipped = new Array();
      for(i=0; i< inames.length; i++) {
        flipped[i] = new Image();
       flipped[i].src = inames[i]+"2.jpg";
    	
        
      }
    }
    
    function over(num) {
      if(document.images) {
        revert[num] = document.images[inames[num]].src;
        document.images[inames[num]].src = flipped[num].src;
      }
    }
    function out(num) {
      if(document.images) document.images[inames[num]].src = revert[num];
    }
    </script>
    
    </head>
    <body>
    <h2>
    test images
    </h2>
    <img src="car1.jpg" name= "car" onMouseOver="over(0)" onMouseOut="out(0)">
    </body>
    </html>
    Code (markup):
    I will be very thankful for any help...

    Regards,
     
    haroon_shah, Apr 23, 2008 IP
  2. haroon_shah

    haroon_shah Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    it worked in another forum...thanks anyway
     
    haroon_shah, Apr 23, 2008 IP