Sélecteur Jquery: Comment faire pour modifier l'attribut src d'une balise d'image sur le lien hover

J'ai besoin de changer l'attribut src de l'image lorsque le lien est en train de planer sur 

<div class="clear span-33 last" id="navigation">
  <div class="hicon span-1"><a href="#" title="Homepage"><img src="../Assets/images/home.png" /></a></div>
</div>

Également modifier la valeur par défaut, lorsque le lien n'est pas planait sur...

OriginalL'auteur Joberror | 2010-01-06

  1. 8

    Vous devriez vraiment regarder dans l'aide de sprites CSS pour la commutation de milieux sur le vol stationnaire. Mais si vous devez le faire en jQuery, quelque chose comme cela devrait le faire. Il suffit de changer le cours de la source de l'image à votre convenance (aussi met en vol stationnaire image):

    var link = $('a'), 
    img  = link.children('img'), 
    orig = img.attr('src'), 
    over = 'over.png', 
    temp = new Image();

temp.src = over; //preloads

link.hover(function() {
    img.attr('src',over);
},function() {
    img.attr('src',orig);
}
    +1, les Sprites CSS est une solution élégante

    OriginalL'auteur David Hellsing

  2. 4

    Je comprends que parfois vous ne pouvez pas juste changer le fond, donc, je recherchais ce avec une IMG en fonction de Navigation (travaux trop juste rmbr pour charger jquery):

    <script type="text/javascript">
$(document).ready(function(){

    $(".navbar li").each(function(){
        var link = $(this).children("a");
        var image = $(link).children("img");
        var imgsrc = $(image).attr("src");

        //add mouseover
        $(link).mouseover(function(){
            var on = imgsrc.replace(/.jpg$/gi,"_over.jpg");
            $(image).attr("src",on);
        });

        //add mouse out
        $(link).mouseout(function(){
            $(image).attr("src",imgsrc);
        });
    });

});
</script>



<ul class="navbar"><li><a href="#"><img src="/images/nav_home.jpg" alt="home" /></a></li>
    <li><a href="#"><img src="/images/nav_item2.jpg" alt="Item2" /></a></li>
    <li><a href="#"><img src="/images/nav_item3.jpg" alt="Item3" /></a></li>
     </ul>

    OriginalL'auteur Lorenzo816

  3. 1

    Cette question peut aider: img src & jQuery?

    OriginalL'auteur Justin Ethier

  4. 0

    Cela devrait le faire.

    $('a[title="Homepage"]').hover(
    function () {
        //this is the mouseon event
        $(this).children('img').attr('src', 'newimage.png');
    }, 
    function () {
        //this is the mouseout event
        $(this).children('img').attr('src', '../Assets/images/home.png');
    }
);
    J'avais essayé que beaucoup de timeseven avec différents sélecteur d'attribut, mais ne fonctionne pas pour moi.... ou est-ce b/cos je suis en utilisant xhtml strict des trucs

    OriginalL'auteur defrex

  5. 0

    C'est mon approche et il fonctionne mais l'air trop bizarre et m'a fait un novice de jQuery

                    $('.hicon > a').hover(
                                  function(){
                                      $(this).html("<img src='../Assets/images/homeah.png' />");
                                      },
                                  function(){
                                      $(this).html("<img src='../Assets/images/home.png' />");
                                      }
                                  );

    J'ai cru qu'il y est une meilleure approche. Grâce

    OriginalL'auteur Joberror