图像 src 在 jquery 中鼠标悬停时更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3416524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image src change on mouse over in jquery
提问by piku
html-
html-
<img id="storyimg" src="images/stor.jpg" alt="img" />
<ul class="sb_menu">
<li><a href="linkpage.htm" class="newslink1">Wireless Networking at Fortune Inn, Noida</a></li>
<li><a href="linkpage.htm" class="newslink2">18th International Conference on Oral & Maxillofacial Surgery</a></li>
<li><a href="linkpage.htm" class="newslink3">WiFi deployment at Vellore Institute of Technology</a></li>
</ul>
I want when user moves over these liitems I want to change the image like-
我想当用户移动到这些li项目上时，我想更改图像，例如-
<script>
$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').src("images/stor1.jpg");
...same for newslink2 and 3, image will be stor2 and 3
but this is not working i think i have written wrong jquery?????????
但这不起作用我想我写错了jquery?????????
回答by Sarfraz
Use attr:
使用attr：
$('img#storyimg').attr("src", "images/stor1.jpg");
More Info:
更多信息：
回答by Floyd
Your code:
您的代码：
<script>
$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').src("images/stor1.jpg");
Errors:
错误：
Line 3: use 'attr' instead of 'src' like '.attr("src","images/stor1.jpg");'
第 3 行：使用 'attr' 而不是 'src' 像 '.attr("src","images/stor1.jpg");'
Line 4: ' }); ' is missing at end of the statment
第 4 行：' }); ' 在语句末尾丢失
Correct code:
正确代码：
<script>
$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').attr("src","images/stor1.jpg");
});
If you want to change the image depend on the link you can code:
如果您想根据链接更改图像，您可以编码：
<img id="storyimg" src="images/stor.jpg" alt="img" />
<ul class="sb_menu">
<li><a href="linkpage.htm" class="newslink1" data-image="stor1.jpg">Wireless Networking at Fortune Inn, Noida</a></li>
<li><a href="linkpage.htm" class="newslink2" data-image="stor2.jpg">18th International Conference on Oral & Maxillofacial Surgery</a></li>
<li><a href="linkpage.htm" class="newslink3" data-image="stor3.jpg">WiFi deployment at Vellore Institute of Technology</a></li>
</ul>
<script>
//binds the mouseover-event-handler to all Links the are childs of an LI in UL with Class "sb_menu"
$('UL.sb_menu LI A').bind('mouseover', function(e) {
$('img#storyimg').attr("src","images/" + $(e.target).attr('data-image'));
});
</script>
An improve: "img#storyimg" as selector is ok but only "#storyimg" is mutch faster because getElementById(..) is an native-browser-function. If you use "img#storyimg" jquery must request getElementsByTagName('IMG') and traverse the list to find this element with the id "storyimg". this takes a lot of time equals to the direct execution of "getElementById". An ID of any HTML-Element in a page must be unice. see: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2("This attribute assigns a name to an element. This name must be unique in a document.")
改进："img#storyimg" 作为选择器是可以的，但只有 "#storyimg" 更快，因为 getElementById(..) 是本机浏览器函数。如果您使用“img#storyimg”，jquery 必须请求 getElementsByTagName('IMG') 并遍历列表以查找 id 为“storyimg”的元素。这需要很多时间，相当于直接执行“getElementById”。页面中任何 HTML 元素的 ID 必须是 unice。请参阅：http: //www.w3.org/TR/html401/struct/global.html#h-7.5.2（“此属性为元素分配名称。该名称在文档中必须是唯一的。”）
回答by derek
$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').attr("src","images/stor1.jpg");
回答by TCCV
You probably want $('img#storyimg').attr('src','path/to/new/image.jpg');
你可能想要 $('img#storyimg').attr('src','path/to/new/image.jpg');
EDIT: JINX gotta but me a coke! :o)
编辑：JINX 必须给我一杯可乐！:o)
one more thing, experiment with .mouseenter()and mouseleave().
还有一件事，试验.mouseenter()和mouseleave()。
回答by pyretta
I know it's long ago that the question was asked, but maybe someone could need some other solutions. So I thought, maybe I could help too.
我知道很久以前就有人问过这个问题，但也许有人可能需要其他一些解决方案。所以我想，也许我也能帮上忙。
You could also use the ".hover()" function, maybe like this:
你也可以使用“.hover()”函数，可能是这样的：
This one between <head>and </head>:
这个介于<head>和之间</head>：
<script type="text/javascript">
$(document).ready(function() {
var src_path = "path/images/";
var src_suffix = ".jpg";
$('.yourclass').hover(
function () {
$(this).addClass("hover");
var active_id = $(this).attr('id');
$('#' + active_id + '_pic').attr("src", src_path + active_id + '_big' + src_suffix);
},
function () {
$(this).removeClass("hover");
var active_id = $(this).attr('id');
$('#' + active_id + '_pic').attr("src", src_path + active_id + '_small' + src_suffix);
}
);
});
</script>
And this one between <body>and </body>:
而这个介于<body>和之间</body>：
<div class="fruits">
<a href="#" class="yourclass" id="apple">
<img id="apple_pic" src="files/images/apple_small.jpg" alt="apple" title="apple" />
</a>
<!-- -->
<a href="#" class="yourclass" id="pear">
<img id="pear_pic" src="files/images/pear_small.jpg" alt="pear" title="pear" />
</a>
</div>
On one of our websites, it works well.
在我们的一个网站上，它运行良好。
More Information about the ".hover()" function, you could find here: http://api.jquery.com/hover/
关于“.hover()”函数的更多信息，你可以在这里找到：http://api.jquery.com/hover/
