Question

我尝试复制图像交换，但鼠标输出最终在三个交换中的每一个上都是图像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>

Answer 1

您不能使用同名的多个函数：swapping_pics来解决您的问题，您可以为每个函数添加一个ID，例如：swapping_pics_01，swapping_pics_02，{ {1}}。

但是，这不会解决你所拥有的混乱，而不是所有代码，CSS可以更好的方式做到这一点......

<强> HTML：

swapping_pics_03

<强> CSS：

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

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

JS图像交换中的多个图像，鼠标输出错误的图像

1 个答案: