1

I have the following code. I divided an image in 10 sections and I want to change it to different ones when hovering each of the sections.

Also, I am using this code on multiple images.

The code perfectly works on the first five but not on the remaining three. However, if I delete the five working images, the other three now work fine. Why???

I would appreciate it if anyone could find an answer to this problem.

<head>
  <script>
    if (document.images) { 
                var Imgt2e10 = new Array(); 
                Imgt2e10[0] = new Image(); 
                Imgt2e10[1] = new Image(); 
                Imgt2e10[2] = new Image(); 
                Imgt2e10[3] = new Image(); 
                Imgt2e10[4] = new Image();
                Imgt2e10[5] = new Image(); 
                Imgt2e10[6] = new Image(); 
                Imgt2e10[7] = new Image(); 
                Imgt2e10[8] = new Image(); 
                Imgt2e10[9] = new Image();  
                Imgt2e10[0].src = "img/t2/t2e10/1.png" 
                Imgt2e10[1].src = "img/t2/t2e10/2.png" 
                Imgt2e10[2].src = "img/t2/t2e10/3.png" 
                Imgt2e10[3].src = "img/t2/t2e10/4.png" 
                Imgt2e10[4].src = "img/t2/t2e10/5.png"
                Imgt2e10[5].src = "img/t2/t2e10/6.png" 
                Imgt2e10[6].src = "img/t2/t2e10/7.png" 
                Imgt2e10[7].src = "img/t2/t2e10/8.png" 
                Imgt2e10[8].src = "img/t2/t2e10/9.png" 
                Imgt2e10[9].src = "img/t2/t2e10/10.png" 
            }

            function RollOvert2e10(i) { 
                document.t2e10.src=Imgt2e10[i].src; 
            }
            
            function resetSrct2e10() { 
                document.t2e10.src='img/t2/10.png'; 
                return false; 
            }
  </script>
</head>

<body>
  <div>
    <img src="img/t2/10.png" name="t2e10" usemap="#t2e10Map" border="0" width="250" height="137.5"> 
    <map name="t2e10Map"> 
      <area shape="rect" coords="0,0,25,137.5" 
          onMouseover="RollOvert2e10(0);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="25,0,50,137.5" 
          onMouseover="RollOvert2e10(1);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="50,0,75,137.5" 
          onMouseover="RollOvert2e10(2);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="75,0,100,137.5" 
          onMouseover="RollOvert2e10(3);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="100,0,125,137.5" 
          onMouseover="RollOvert2e10(4);" 
          onMouseout="resetSrct2e10();">
      <area shape="rect" coords="125,0,150,137.5" 
          onMouseover="RollOvert2e10(5);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="150,0,175,137.5" 
          onMouseover="RollOvert2e10(6);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="175,0,200,137.5" 
          onMouseover="RollOvert2e10(7);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="200,0,225,137.5" 
          onMouseover="RollOvert2e10(8);" 
          onMouseout="resetSrct2e10();"> 
      <area shape="rect" coords="225,0,250,137.5" 
          onMouseover="RollOvert2e10(9);" 
          onMouseout="resetSrct2e10();">  
    </map> 
  </div>
</body>
Gonçalo
  • 119
  • 1
  • 12
  • 1
    I'm not sure why your code isn't working, but I cleaned up the first part for you since it looked so long and tedious http://jsfiddle.net/p80xyptL/ – buhbang Dec 09 '14 at 00:29
  • 1
    @Jung3o you solved all my problems :) everything is working now. thanks a lot! – Gonçalo Dec 09 '14 at 01:15

0 Answers0