鼠标移到图片上变为另外一副图

Question

图片做超级连接，鼠标移到该图片上变为另外一副图，效果怎么做？
我的页面有好多张要做这种效果的图片，

Answer 1

很久没有碰过JS了，就记得GETELMENTBYID。。哪位朋友给写下代码可以吗

Answer 2

试了一下，做出来了。我只能用上面的代码实现。有没有简单一些的方法？因为图片很多，都这么写不太好，会有很多重复代码。
<a href="HTMLPage1.htm"><img src= "img/workarrange01.jpg" id="img1" onmouseover="this.src='img/workarrange02.jpg'" onmouseout="this.src='img/workarrange01.jpg'" /></a>
<br />
<a href="HTMLPage2.htm"><img src="img/workarrange03.jpg" id="img2"  onmouseover="this.src='img/workarrange04.jpg'" onmouseout="this.src='img/workarrange03.jpg'"/></a>
<br />
<a href="HTMLPage3.htm"><img src="img/workarrange05.jpg" id="img3"  onmouseover="this.src='img/workarrange06.jpg'" onmouseout="this.src='img/workarrange05.jpg'"/></a>

Answer 3

<img src="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg" rel="http://avatar.profile.csdn.net/5/A/2/2_p2227.jpg" attr=""/><br/>
<img src="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg" rel="http://avatar.profile.csdn.net/5/A/2/2_p2227.jpg" attr=""/><br/>
<img src="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg" rel="http://avatar.profile.csdn.net/5/A/2/2_p2227.jpg" attr=""/><br/>
<img src="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg" rel="http://avatar.profile.csdn.net/5/A/2/2_p2227.jpg" attr=""/><br/>
<img src="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg" rel="http://avatar.profile.csdn.net/5/A/2/2_p2227.jpg" attr=""/><br/>
<img src="http://avatar.profile.csdn.net/9/2/F/2_mizuho_2006.jpg" rel="http://avatar.profile.csdn.net/5/A/2/2_p2227.jpg" attr=""/><br/>
    
<script type="text/javascript">
var imgs= document.getElementsByTagName("img");sw = function(obj){
obj = obj || {};
obj.setAttribute("attr",obj.src);
obj.setAttribute("src",obj.getAttribute("rel"));
obj.setAttribute("rel",obj.getAttribute("attr"));
}
for (var i=0;i<imgs.length;i++){
imgs[i].onmouseover = function(){
sw(this);
} imgs[i].onmouseout = function(){
sw(this);
}}
    </script>