图片src改变了jQuery的

问题描述：

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

答

使用attr：

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

更多信息：

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

答

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

答

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

EDI T：JINX得拿我可乐！：o）

还有一件事，用.mouseenter()和mouseleave()进行实验。

答

您的代码：

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

错误：

线路3：使用 'ATTR'，而不是像” .attr（ “SRC”，“图像/ stor1 'SRC'。 JPG“）;”

第4行：'}）; “缺少在statment结束

正确的代码：

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

答

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

你也可以使用“。悬停（）”功能，也许是这样的：

这一个<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>

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

在我们的网站之一，它

有关“.hover（）”功能的更多信息，可以在这里找到：http://api.jquery.com/hover/

图片src改变了jQuery的

相关推荐