文章/答案/技术大牛

发布

社区首页 >问答首页 >JS图像交换中多个图像，鼠标移出错误图像

问JS图像交换中多个图像，鼠标移出错误图像
EN

Stack Overflow用户

提问于 2013-02-09 10:52:57

回答 1查看 788关注 0票数 1

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

html

image

swap

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-09 11:21:28

你不能有多个函数具有相同的名称：swapping_pics，为了解决你的问题，你可以给每个函数添加一个id，比如：swapping_pics_01，swapping_pics_02，swapping_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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14784458

复制

相似问题

问JS图像交换中多个图像，鼠标移出错误图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS图像交换中多个图像，鼠标移出错误图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS图像交换中多个图像，鼠标移出错误图像
EN