2010-08-05 22 views
2

html-changement d'image src de la souris dans 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> 

Je veux quand l'utilisateur se déplace sur ces li articles que je veux changer l'image comme-

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

mais cela ne fonctionne pas Je pense que j'ai écrit mal jquery ?????????

Répondre

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

Vous voulez probablement $('img#storyimg').attr('src','path/to/new/image.jpg');

EDI T: JINX, mais moi, un coca! : o)

encore une chose, expérimenter avec .mouseenter() et mouseleave().

4

Votre code:

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

Erreurs:

Ligne 3: utiliser 'attr' au lieu de 'src' comme » .attr ("src"," images/stor1. jpg "); '

Ligne 4: '}); 'Est absent à la fin de la statment

code correct:

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

Si vous voulez changer l'image dépendent du lien que vous pouvez coder:

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

Une amélioration: " img # storyimg "comme selector est ok mais seulement" #storyimg "est mutch plus rapide parce que getElementById (..) est une fonction de navigateur natif. Si vous utilisez "img # storyimg" jquery doit demander getElementsByTagName ('IMG') et parcourir la liste pour trouver cet élément avec l'identifiant "storyimg". cela prend beaucoup de temps est égal à l'exécution directe de "getElementById". Un ID d'un élément HTML d'une page doit être unice. voir: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 ("Cet attribut assigne un nom à un élément Ce nom doit être unique dans un document.")

1

Je sais qu'il ya longtemps, la question a été posée, mais peut-être que quelqu'un aurait besoin d'autres solutions. Alors j'ai pensé, peut-être que je pourrais aider aussi.

Vous pouvez également utiliser le ".vol stationnaire() » fonction, peut-être comme ceci:

Celui-ci entre <head> et </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> 

Et celui-ci entre <body> et </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> 

Sur l'un de nos sites Web, il fonctionne bien

Plus d'informations sur la fonction ".hover()", vous pouvez trouver ici: http://api.jquery.com/hover/