javascript - 一个来源上的两个 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。