JS鼠标经过换图案例

以前做JS鼠标经过后换图都是用Macromedia Dreamweaver 8自己带的换图功能，还有一种很简单的方法就是这样（<img src="1.jpg" onmouseover="this.src='2.jpg' "  onmouseout="this.src='1.jpg'">）这两种方法都很简单，但听说那种方法是当鼠标经过时会访问一次服务器，如果是流量特大的网站用那种方法的话就会使服务器产生很大的负担，所以就又写了以下这种方法，也很简单主要是不会有上面两种方法的缺点。下面我就来说说这种方法

JS部分是这么写的：

function Show_God(Tab_num)
{
  document.getElementById("a_" + Tab_num + "1").style.display = "none";
  document.getElementById("a_" + Tab_num + "2").style.display = "block";
 }
function Show_Dea(Dab_num)
{
  document.getElementById("a_" + Dab_num + "1").style.display = "block";
  document.getElementById("a_" + Dab_num + "2").style.display = "none";
 }

这是CSS部分:(这个和换图没有直接的关系，只是样试设置)

ul, li {list-style-type:none;margin:0;padding:0;}
.togjbannrd{width:925px; padding-left:25px; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #E5E5E5;}
.togjbannrd ul{width:925px; float:left;}
.togjbannrd li{width:182px; height:42px; float:left;}
.togjbannrd img {border:1px solid #ccc;}

这是DIV代码部分：

<div class="togjbannrd">
 <ul>
  <li onmouseover="Show_God(1)" onmouseOut="Show_Dea(1)"><a href="#" target="_blank"><img id="a_11" src="images/20090603.gif" border="0" /><img id="a_12" style="display:none;" src="images/20090602.gif" border="0" /></a></li>
  <li onmouseover="Show_God(2)" onmouseOut="Show_Dea(2)"><a href="#" target="_blank"><img id="a_21" src="images/20090603.gif" border="0" /><img id="a_22" style="display:none;" src="images/20090602.gif" border="0" /></a></li>
  <li onmouseover="Show_God(3)" onmouseOut="Show_Dea(3)"><a href="#" target="_blank"><img id="a_31" src="images/20090603.gif" border="0" /><img id="a_32" style="display:none;" src="images/20090602.gif" border="0" /></a></li>
 </ul>
</div>