onmouseover和onmouseout滑鼠移入移出切換圖片的幾種實作方法

這篇文章跟大家介紹onmouseover和onmouseout滑鼠移入移出切換圖片的幾種實作方法 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

滑鼠移入移出圖片切換很常見的，那我們就來談談它的實作方法：

第一種方法，也是最簡單的一種，在html裡就可以實現

<img class="img" src="img/dongtai.png" onmouseover="this.src=&#39;img/HBuilder.png&#39;" onmouseout="this.src=&#39;img/dongtai.png&#39;"/>

先預設一張圖片，然後在寫圖片移入移出的圖片。

第二種方法，js替換

<img name="image1" src="img/dongtai.png" onmouseover="mouseOver()" onmouseout="mouseOut()" />

function mouseOver() {
	document.image1.src = "img/HBuilder.png"
}

function mouseOut() {
	document.image1.src = "img/dongtai.png"
}

在js裡面寫好替換圖片的方法，在html裡面呼叫。

若是不用onmouseover和onmouseout的話，還可以這樣寫

<p class="bg"></p>

.bg{background: url(img/HBuilder.png) no-repeat;height: 300px;}
.bg:hover{background: url(img/dongtai.png) no-repeat;}

這三種方法都可以實現滑鼠移入移出圖片切換效果，是不是很簡單，大家可以動手試試！

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請造訪JavaScript影片教學！

相關推薦：

php公益訓練影片教學

#JavaScript圖文教學

JavaScript線上手冊

以上是onmouseover和onmouseout滑鼠移入移出切換圖片的幾種實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！