gpt4 book ai didi

javascript - JS中多张图片图片交换,mouseout错误图片

转载 作者:行者123 更新时间:2023-11-28 02:27:00 27 4
gpt4 key购买 nike

我尝试复制图像交换,但鼠标移出最终在三个交换中的每一个上都是图像 3,而我只希望它位于最后一个。如果我能得到任何帮助来弄清楚如何使交换彼此不同,这样它们就不会调用相同的图像,我将不胜感激,谢谢!

//---imageswap1

if(document.images) {
cars1 = new Array();
cars1[1] = new Image();
cars1[1].src = "car4.png";
cars1[2] = new Image();
cars1[2].src = "car1.png";
}

function swapping_pics(picture_name, value_2) {
document.images[picture_name].src = cars1[value_2].src;
}

//---imageswap2

if(document.images) {
cars2 = new Array();
cars2[1] = new Image();
cars2[1].src = "car5.png";
cars2[2] = new Image();
cars2[2].src = "car2.png";
}

//---imageswap3

function swapping_pics(picture_name, value_2) {
document.images[picture_name].src = cars2[value_2].src;
}

if(document.images) {
cars3 = new Array();
cars3[1] = new Image();
cars3[1].src = "car6.png";
cars3[2] = new Image();
cars3[2].src = "car3.png";
}

function swapping_pics(picture_name, value_2) {
document.images[picture_name].src = cars3[value_2].src;
}


<div id="imageswap1" onMouseOver="swapping_pics('car1',1)" onMouseOut="swapping_pics('car1',2)" href="javascript:void">
<img name="car1" border=”0” src="car1.png" alt="car1">
</div>

<div id="imageswap2" onMouseOver="swapping_pics('car2',1)" onMouseOut="swapping_pics('car2',2)" href="javascript:void">
<img name="car2" border=”0” src="car2.png" alt="car2">
</div>

<div id="imageswap3" onMouseOver="swapping_pics('car3',1)" onMouseOut="swapping_pics('car3',2)" href="javascript:void">
<img name="car3" border=”0” src="car3.png" alt="car3">
</div>

最佳答案

您不能有多个同名函数:swapping_pics,为了解决您的问题,您可以为每个函数添加一个 id,例如:swapping_pics_01swapping_pics_02swapping_pics_03

但这并不能解决你所遇到的困惑,CSS 可以以更好的方式代替所有代码......

HTML:

<div id="imageswap1" class="swap"></div>
<div id="imageswap2" class="swap"></div>
<div id="imageswap3" class="swap"></div>

CSS:

// This class "swap" is general to all the divs
.swap {
width: 500px; // This is the image size
height: 400px;
}

#imageswap1 { background-image: url("car01.png"); }
#imageswap1:hover { background-image: url("car04.png"); } // Mouse over 1

#imageswap2 { background-image: url("car02.png"); }
#imageswap2:hover { background-image: url("car05.png"); } // Mouse over 2

#imageswap3 { background-image: url("car03.png"); }
#imageswap3:hover { background-image: url("car06.png"); } // Mouse over 3

摆弄示例:http://jsfiddle.net/qnw6j/

关于javascript - JS中多张图片图片交换,mouseout错误图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14784458/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com