onmouseover函数Javascript

Question

我在更改动态图片上的onmouseover和onmouseout属性时遇到问题。我希望它工作的方式是每当我将鼠标放在图像上时，图像必须改变，当我将鼠标移开时，它必须更改为原始图片。并且每当我选择任何图像时，必须将该图像更改为在将图像移动鼠标时显示的图像。当我选择任何其他图像时，必须进行相同的过程，但之前更改的图像必须更改回原始图片。

我完成了上述所有，但我的问题是，当我选择多个图片并将鼠标放在先前选择的图像上时，这些图像不会更改（onmouseover属性不再适用于它们）。

<script language="javascript"> 
    function changeleft(loca){ 
     var od='' 
     var imgs = document.getElementById("leftsec").getElementsByTagName("img"); 
     for (var i = 0, l = imgs.length; i < l; i++) { 
      od=imgs[i].id; 

      if(od==loca){ 
       imgs[i].src="images/"+od+"_over.gif"; 
       imgs[i].onmouseover=""; 
       imgs[i].onmouseout=""; 
      }else{ 
       od = imgs[i].id; 
       imgs[i].src="images/"+od+".gif"; 
       this.onmouseover = function(){this.src="images/"+od+"_over.gif";}; 
        this.onmouseout = function(){this.src="images/"+od+".gif";}; 
      } 

     } 
    } 
</script> 

<div class="leftsec" id="leftsec" > 
    <img id='wits' class="wits1" src="images/wits.gif" onmouseover="this.src='images/wits_over.gif'" onmouseout="this.src='images/wits.gif'" onclick="changeleft(this.id)" /><br /> 

    <img id='city' class="city1" src="images/city.gif" onmouseover="this.src='images/city_over.gif'" onmouseout="this.src='images/city.gif'" onclick="changeleft(this.id)" /><br /> 

    <img id='organise' class="city1" src="images/organise.gif" onmouseover="this.src='images/organise_over.gif'" onmouseout="this.src='images/organise.gif'" onclick="changeleft(this.id)" /><br /> 

    <img id='people' class="city1" src="images/people.gif" onmouseover="this.src='images/people_over.gif'" onmouseout="this.src='images/people.gif'" onclick="changeleft(this.id)" /><br /> 
</div> 

Answer 1

我想说你不需要重置onmouseover事件的行。

有没有必要重写onmouseover事件 - 所有你想改变的是img src属性。

正如亚当提到，有更现代的方式来做到这一点使用jQuery - 看：

http://code.google.com/p/jquery-swapimage/

例如。