兩個ONMOUSEOVER在一個來源。 Javascript

Question

我正在嘗試寫有橫幅的JavaScript。當我將鼠標懸停在橫幅上時，它會變成不同的橫幅。然後，當我將鼠標移出時，它應該保持不變。然後，當我將鼠標移回時，應該返回到原始的橫幅。但我無法弄清楚如何做到這一點。有什麼建議嗎？

Answer 1

使用JavaScript

<img onmouseover="changeImage()" id="myBanner" src="Images\image1.jpg"/> 
<script> 
function changeImage(){ 
    if(document.getElementById("myBanner").src=="Images\image1.jpg"){ 
    document.getElementById("myBanner").src="Images\image2.jpg" 
    }else{ 
    document.getElementById("myBanner").src="Images\image1.jpg" 
    } 
} 
</script> 

本工程爲2個圖像彼此之間切換。如果你想使用更多，我建議使用一個變量，你傳遞給函數和switch，通過所有的選項。

Answer 2

你只需要一個鼠標懸停處理切換：

(function() { 
    var imgTag = document.getElementsByTagName('img')[0]; 
    imgTag.addEventListener('mouseover', function(e) { 
     var currentImage = imgTag.getAttribute('src'); 

     imgTag.setAttribute('src', imgTag.getAttribute('data-other-image')); 
     imgTag.setAttribute('data-other-image', currentImage); 
    }); 
}()); 

演示：http://jsfiddle.net/EsNEC/

這樣你就不必在你的HTML內嵌的JavaScript。