我试图改变一个静态图像，当你把鼠标放在一个链接。 （我用三个不同的链接为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>
null
不要使用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中使用always函数。
你可以做这种事！
<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]
});
});
建议您这样的代码可能行不通。 我现在不是和一个代码编辑器一起尝试它！ 这是你给你一个ide如何做得更好。
我还建议您使用事件侦听器。 将来当你把你的代码改成模块时，就不能使用htlm onClick之类的东西了，用事件侦听器来做会更干净
希望你觉得这对你有帮助
