Question

当您将鼠标放在链接上时，我正在尝试更改静态图像。（我通过三个不同的链接为3个不同的图像创建了一个数组，并在该数组上创建了新图像。

<body>
<script type="text/javascript">
  var cambiar = document.getElementsByClassName("image");
  var imgArray = new Array();
    imgArray[0] = document.getElementsByClassName("pricipal");
    imgArray[1] = new Image();
    imgArray[1].src = 'image2.jpg';
    imgArray[2] = new Image();
    imgArray[2].src = 'image3.jpg';
    imgArray[3] = new Image();
    imgArray[3].src = 'image3.jpg';
</script>
<div class="image"><img class="pricipal" src="image1.jpg" alt=""></div>
<a href="#" onmouseover="cambiar.innerHTML=imgArray[1]" onmouseout="cambiar.innerHTML=imgArray[0]">image2</a>
<a href="#" onmouseover="cambiar.innerHTML=imgArray[2]" onmouseout="cambiar.innerHTML=imgArray[0]">image3</a>
<a href="#" onmouseover="cambiar.innerHTML=imgArray[3]" onmouseout="cambiar.innerHTML=imgArray[0]">image4</a>

Answer 1

不使用innerHTML，而是使用src属性来更改图像：这样您就可以拥有一个新的数组：

// Wait for the elements to load first
document.addEventListener("DOMContentLoaded", function(){
    var cambiar = document.getElementsByClassName("image");
    var imgArray = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
});

然后输入您的元素

<div class="image"><img class="pricipal" src="image1.jpg" alt=""></div>
<a href="#" onmouseover="cambiar.src=imgArray[1]" onmouseout="cambiar.src=imgArray[0]">image2</a>
<a href="#" onmouseover="cambiar.src=imgArray[2]" onmouseout="cambiar.src=imgArray[0]">image3</a>
<a href="#" onmouseover="cambiar.src=imgArray[3]" onmouseout="cambiar.src=imgArray[0]">image4</a>

Answer 2

我建议您在JavaScrip中始终使用功能。

您可以这样做！

<div class="image">
   <img class="pricipal" src="image1.jpg" alt="">
</div>
<a href="#" class="imagesToChange">image2</a>
<a href="#" class="imagesToChange">image3</a>
<a href="#" class="imagesToChange">image4</a>

JavaScript：

const imgArray = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
const allPhotos = document.querySelectorAll('#imagesToChange')

allPhotos.forEach((photo,index)=>{
    photo.addEventListener('mouseover', (ev)=>{
        photo.src = imgArray[index+1]  
        // +1 because the index 0 is the one you want when mouse out
    });


    photo.addEventListener('mouseout'(ev)=>{
        photo.src = imgArray[0]
    });
});

请告知您，与此代码完全相同的代码可能不起作用。我现在没有代码编辑器可以尝试！是您为您提供如何做得更好的理想方法。

我也建议您使用事件侦听器。将来，当您将代码更改为模块时，将无法使用htlm onClick等功能，因此使用事件侦听器可以更干净

希望对您有帮助

如何在鼠标悬停/鼠标悬停时切换图像？

2 个答案: