jquery中鼠标悬停时图像src发生变化

Question

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>

我希望当用户移动这些 li 项目时我想更改图像 -

<script>
                $('a.newslink1').bind('mouseover', function() {
                $('img#storyimg').src("images/stor1.jpg");
...same for newslink2 and 3, image will be stor2 and 3

但这不起作用我认为我写了错误的 jquery?????????

Answer 1

使用attr：

$('img#storyimg').attr("src", "images/stor1.jpg");

更多信息：

http://api.jquery.com/attr/ jquery.com/attr/

Answer 2

您的代码：

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').src("images/stor1.jpg");

错误：

第 3 行：使用 'attr' 而不是 'src'，如 '.attr("src","images/stor1.jpg");'

第 4 行：' });语句末尾缺少'

正确代码：

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').attr("src","images/stor1.jpg");
  });

如果您想根据链接更改图像，您可以编码：

<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>

改进：“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（“该属性为元素分配一个名称。该名称在文档中必须是唯一的。”）

Answer 3

$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').attr("src","images/stor1.jpg");

Answer 4

你可能想要 $('img#storyimg').attr('src','path/to/new/image.jpg');

编辑：JINX 得给我一杯可乐！ :o)

还有一件事，尝试一下 .mouseenter() 和 mouseleave()。

Answer 5

我知道这个问题很久以前就被提出了，但也许有人可能需要其他解决方案。所以我想，也许我也能帮忙。

您还可以使用“.hover()”函数，可能像这样：

和 之间的这个：

<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>

以及 < code> 和 ：

<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>

在我们的一个网站上，它运行良好。

有关“.hover()”函数的更多信息，您可以在这里找到：http://api.jquery.com /悬停/