如何在鼠标悬停/鼠标退出时切换图像?

当您将鼠标放在链接上时，我试图更改静态图像。(我使用三个不同的链接为 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>

不使用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>

我建议你在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]
});
});

建议您，与此完全相同的代码可能不起作用。我现在没有代码编辑器来尝试它！是你给你一个如何做得更好的ID。

我还建议您使用事件侦听器。将来当您将代码更改为模块时，不会使用 htlm onClick 和这些东西，使用事件侦听器这样做会更干净

希望对您有所帮助

相关内容

最新更新

热门标签：