鼠标悬停&单个锚点标记中的mouseout事件
mouseover & mouseout event in a single anchor tag
我希望有人帮我解决这个问题。问题是,我有5个锚标签,每个标签都有一个图像。鼠标悬停时,图像应更改为不同的图像,鼠标悬停时应回滚到相同的前一图像。我使用了一些代码,但根本不起作用。有时鼠标悬停有效,有时鼠标移出有效,但两者不能同时工作。还有人能帮我把这个JavaScript编码简化成紧凑的jQuery编码吗。
Fiddle
HTML:
<body>
<div class="home_wrapper">
<div class="header">
<div class="left_head">
<img src="Images/logo.jpg" />
</div>
<div class="right_head">
<div class="empty"></div>
<a href="#" class="menu_but" id="1" onmouseover="roll(this.id)" onmouseout="rollback(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="2" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="3" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="4" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="5" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="6" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="7" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
</div>
</div>
</div>
</body>
JavaScript:
function roll(a) {
var a;
//alert(a);
var alloc = document.getElementById(a);
if (a == 1) {
alloc.innerHTML = '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCr1SVvp2w2_tA9MEb3myB-GMC8HBA3X_b0OahVp8HBynzyGS7"/>';
} else if (a == 2) {
alloc.innerHTML = '<img src="http://www.clker.com/cliparts/0/7/9/2/11954285511639254892power_button_raoul_rene__01.svg.med.png
"/>';
} else if (a == 3) {
alloc.innerHTML = '<img src="http://www.gifs.cc/home/large-home-button-amber.jpg"/>';
} else if (a == 4) {
alloc.innerHTML = '<img src="http://www.gifs.cc/home/large-home-purple.jpg"/>';
} else if (a == 5) {
alloc.innerHTML = '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTuEEKlyX_gmwmHSOoOCM31sCF-hs0humgJ956hOgYEDn23_3fa"/>';
} else if (a == 6) {
alloc.innerHTML = '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRW1zA5eAA8-GcasNeSsln7J1R51lclCQqYbYE_pqZSC2WpPcs9"/>';
} else if (a == 7) {
alloc.innerHTML = '<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQHSS3Xaa0f9Jkc2bI-uQErfsNRmSHA0Q9VkSjZOrUGkyX-yj-7Ug"/>';
}
}
function rollback(obj) {
var obj;
alert(obj);
var disalloc = document.getElementById(obj);
if (obj == 1) {
disalloc.innerHTML = '<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG"/>';
}
}
CSS:
.home_wrapper {
border: 1px solid black;
width: 100%;
height: 700px;
}
.header {
//border:1px solid red;
width: 100%;
height: 14.5%;
}
.left_head {
//border:2px solid black;
width: 25.5%;
height: 100%;
float: left;
margin-left: 1%;
background-image: url(Images/bg.png);
//background-repeat:repeat-x;
//background-repeat:repeat-y;
background-repeat: repeat;
}
.left_head img {
width: 100%;
height: 89%
}
.right_head {
margin-left: 0.2%;
//border:1px solid red;
width: 73%;
height: 100%;
float: left;
background-image: url(Images/bg.png);
//background-repeat:repeat-x;
//background-repeat:repeat-y;
background-repeat: repeat;
}
.menu_but img {
margin-top: 2.8%;
width: 12%;
height: 70%;
}
.menu_line {
margin-bottom: 3%;
}
.empty {
//border:1px solid black;
width: 8%;
height: 100%;
float: left;
}
使用jQuery将非常简单。下面的Fiddle会帮助你。
http://jsfiddle.net/17g6q8k0/2/
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function() {
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
}).hover(sourceSwap, sourceSwap);
});
以下是简化分配函数的步骤:
function roll(a)
{
var a;
//alert(a);
var alloc =document.getElementById(a);
var myImageOptions = {
'<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCr1SVvp2w2_tA9MEb3myB-GMC8HBA3X_b0OahVp8HBynzyGS7" />',
'<img src="http://www.clker.com/cliparts/0/7/9/2/11954285511639254892power_button_raoul_rene__01.svg.med.png" />',
'<img src="http://www.gifs.cc/home/large-home-button-amber.jpg" />',
'<img src="http://www.gifs.cc/home/large-home-purple.jpg" />',
'<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTuEEKlyX_gmwmHSOoOCM31sCF-hs0humgJ956hOgYEDn23_3fa" />',
'<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRW1zA5eAA8-GcasNeSsln7J1R51lclCQqYbYE_pqZSC2WpPcs9" />',
'<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQHSS3Xaa0f9Jkc2bI-uQErfsNRmSHA0Q9VkSjZOrUGkyX-yj-7Ug" />'
};
alloc.html(myImageOptions[a+1]);
}
我在编辑器中看到,您的图像无法加载。先解决这个问题
这个解决方案只需要jQuery的魔力。对于每个图像,您需要定义下一个标签:
- class等于"changeimage"
- src等于原始图像的完整url
- 中的数据等于鼠标悬停时图像的完整url
- data-out等于鼠标离开时图像的完整url(等于src)
这是一个例子:
<img class="changeimage"
src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG"
data-out="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG"
data-in="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCr1SVvp2w2_tA9MEb3myB-GMC8HBA3X_b0OahVp8HBynzyGS7" />
<img class="changeimage"
src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG"
data-out="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG"
data-in="http://www.clker.com/cliparts/0/7/9/2/11954285511639254892power_button_raoul_rene__01.svg.med.png" />
然后,这个脚本将满足您的需求:
$(".changeimage").hover(
function () {
$(this).attr('src', $(this).data('in'));
},
function () {
$(this).attr('src', $(this).data('out'));
}
);
你可以看到它在工作http://jsfiddle.net/msnm0w35/1/
相关文章:
- 如何正确捕捉mouseout事件
- Mouseover,Mouseout事件未在IE中启动
- 鼠标悬停&单个锚点标记中的mouseout事件
- 如何停止mouseout事件在列表中的传播
- onmouseover在click和mouseout事件之前触发
- 阻止.mouseout事件执行
- 如何在asp.net c#中显示和隐藏mouseover和mouseout事件的标签
- 在IE8中检测到mouseout事件
- 弹出框中的mouseout事件导致儿童隐藏
- 使用计数器索引来设置.hover()和.mouseout()事件
- 忽略JS中同一元素的子元素的mouseenter/mouseout事件
- 如果onclick被按下,阻塞mouseout事件监听器
- Touch等同于Mouseout事件是什么?
- Mouseout事件在鼠标实际退出之前触发
- 尝试创建jquery mouseover和mouseout事件
- jQuery mouseout事件后的元素调整大小
- 拖动元素和mouseout事件
- iPhone/iPad是否支持mouseout事件?
- 在iPad上触发jQuery mouseout事件
- jQuery触发mouseout事件