JS中的多个图像交换,鼠标移出错误的图像
Multiple Images in JS image swap, mouseout wrong image
我试图复制一个图像交换,但鼠标输出在三个交换中的每一个上都是图像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_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/
相关文章:
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 鼠标悬停时如何居中放大背景图像
- 在鼠标悬停处隐藏图像
- 替换鼠标悬停时的图像源
- 如何在asp:linkButton上显示鼠标悬停事件上的图像
- jQuery淡化图像,但图像除外,鼠标悬停在图像上
- 将鼠标悬停在图像上时显示文本
- 更改鼠标悬停时映射图像热点的背景
- jQuery透明图像描述鼠标悬停时的幻灯片动画
- 将href链接添加到通过js鼠标悬停显示的图像
- 将鼠标悬停在图像效果上
- Javascript 图像鼠标向下正在触发 2 个事件
- 获取/设置地图图像鼠标位置
- 获取嵌套网格视图中图像鼠标悬停的动态详细信息
- 图像鼠标悬停平移的公式
- 如何在更改图像鼠标悬停事件中添加淡入淡出
- 类似Jquery图像.鼠标悬停时的图像替换
- 显示下拉菜单时,图像鼠标悬停
- 什么是最好的方法做一个javascript褪色图像鼠标悬停和鼠标移出效果
- 如何在javascript中制作图像鼠标