chlntng129的部落格

從前遇到這樣的換圖樣式，都會使用DW內建的方式，就讓程式碼又臭又長。

學習了JQUERY後，使用Jq的hover 短短的幾行，就可以完成了。

JQ程式碼：

$(document).ready(function(){
	var itemnum = $('#menu > li').size();　// 取得總個數
　　 
 //建立　換圖function
	function menu(i){
	$("#menu li a img").eq(i).hover(
　　　　function(){
　	$(this).attr("src","images/itemo" + i +".png")//src滑過的圖片路徑

　　　　　},
　　　　function(){
　　　$(this).attr("src","images/item" + i +".png")// src 離開的圖片路徑

　　　　　})　　

}
// 執行　function

　　for(i=0 ; i<itemnum ; i++){
　　　 menu(i); 
　　}
})


html程式碼：

<ul class="menuitem" id="menu">
　<li><a href="#"><img src="images/item0.png" alt=""></a></li>
　<li><a href="#"><img src="images/item1.png" alt=""></a></li>
　<li><a href="#"><img src="images/item2.png" alt=""></a></li>
　<li><a href="#"><img src="images/item3.png" alt=""></a></li>
　<li><a href="#"><img src="images/item4.png" alt=""></a></li>
　<li><a href="#"><img src="images/item5.png" alt=""></a></li>
　<li><a href="#"><img src="images/item6.png" alt=""></a></li>
　<li><a href="#"><img src="images/item7.png" alt=""></a></li>
　<li><a href="#"><img src="images/item8.png" alt=""></a></li>
</ul>