Переместите указатель мыши на изображение

У меня есть 4 изображения на HTML-странице: 1.png, 2.png, 3.png и 4.png. Когда пользователь переводит указатель мыши на 1.png, 2.png должен заменить 4.png. Аналогично, если указатель мыши переходит к 2.png, 3.png следует заменить на 1.png.Переместите указатель мыши на изображение

Вот мой код:

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <script type="text/javascript"> 
      function image1_mouseover() 
      { 
       var img2 = document.getElementById('img2'); 
       var img4 = document.getElementById('img4'); 
       img2.setAttribute('src','exercice1/4.png'); 
       img2.setAttribute('id','img4'); 
       img4.setAttribute('src','exercice1/2.png'); 
       img4.setAttribute('id','img2'); 
      } 

      function image2_mouseover() 
      { 
       var img1 = document.getElementById('img1'); 
       var img3 = document.getElementById('img3'); 
       img1.setAttribute('src','exercice1/3.png'); 
       img1.setAttribute('id','img3'); 
       img3.setAttribute('src','exercice1/1.png'); 
       img3.setAttribute('id','img1'); 
      } 

      function image3_click() 
      { 

      } 
     </script> 
     <style type="text/css"> 
      table 
      { 
       margin-left:auto; 
       margin-right:auto; 
      } 
     </style> 
    </head> 
    <body> 
     <table class="centrer"> 
      <tr> 
       <td><img src="exercice1/1.png" alt="Image 1" id="img1" onmouseover="image1_mouseover()"></td> 
       <td><img src="exercice1/2.png" alt="Image 2" id="img2" onmouseover="image2_mouseover()"></td> 
      </tr> 
      <tr> 
       <td><img src="exercice1/3.png" alt="Image 3" id="img3"></td> 
       <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td> 
      </tr> 
     </table> 
    </body> 
</html>

Он работает сначала, когда я двигаю мышь 1.png 2.png и заменяет 4.png. Но затем, когда я перемещаю мышь на 2.png, 1.png не заменяет 3.png, вместо этого мне пришлось переместить мышь над 4.png, чтобы это произошло.

Что случилось?

источник

2013-02-20 Ichigo Kurosaki

Я думаю, вы смущены тем, что происходит с изображениями.

Вместо переключения их атрибутов, как насчет переключения позиций изображений?

function switch_images(i1,i2) { 
    var e1 = document.getElementById('img'+i1), 
     e2 = document.getElementById('img'+i2), 
     e1parent = e1.parentNode; 
    e2.parentNode.appendChild(e1); 
    e1parent.appendChild(e2); 
}

Затем используйте этот HTML:

<table class="centrer"> 
    <tr> 
     <td><img src="exercice1/1.png" alt="Image 1" id="img1" onmouseover="switch_images(2,4)"></td> 
     <td><img src="exercice1/2.png" alt="Image 2" id="img2" onmouseover="switch_images(1,3)"></td> 
    </tr> 
    <tr> 
     <td><img src="exercice1/3.png" alt="Image 3" id="img3"></td> 
     <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td> 
    </tr> 
</table>

источник

2013-02-20 20:31:13

большое спасибо :) –

Переместите указатель мыши на изображение

ответ

Смежные вопросы