鼠標移入移出切換不同圖片

　　有時我們為了展示產品的特性會用不同的圖片顯示效果，比如調光玻璃，如下圖所示，鼠標指針移出圖片正常效果像圖1，鼠標移入開啟了調光功能后顯示圖2，這個如何實現呢？有3種方法，隨ytkah一起來看看吧

 

　　第一種方法，也是最簡單的一種，在html代碼里就可實現

<img class="img" src="img/dongtai.png" onmouseover="this.src='img/HBuilder.png'" onmouseout="this.src='img/dongtai.png'"/>

　　先默認一張圖片，然后再寫圖片移入移出的圖片

 

　　第二種方法，js替換，在js里面寫好替換圖片的方法，在html里面調用 

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

　　js切換效果代碼如下

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

　　第三種，設置不同的背景，不用onmouseover和onmouseout

<div class="bg"></div>

　　css代碼如下

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