Changement de la source de l'image à l'aide de jQuery

Question

J'ai quelques images et de leur survol de l'image. À l'aide de jQuery, je veux afficher/masquer l'image de survol lorsque le onmousemove/onmouseout événement de se produire. Tous mes image noms suivent le même modèle, comme ceci:

Image D'Origine: Image.gif

Survol De L'Image: Imageover.gif

Je veux insérer et de supprimer le "plus" partie de la source de l'image dans le onmouseover et onmouseout cas, respectivement.

Comment puis-je le faire à l'aide de jQuery?

Answer 1

Mettre en place des prêts:

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

Answer 2

Je sais que vous vous posez sur l'utilisation de jQuery, mais vous pouvez obtenir le même effet dans les navigateurs qui ont JavaScript désactivé à l'aide de CSS:

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

Il y a une description plus détaillée ici:http://tutorials.alsacreations.com/imgreactive/

Mieux encore, cependant, est d'utiliser des sprites: http://www.findmotive.com/2006/10/31/simple-css-image-rollover/

Answer 3

Si vous avez plus d'une image et vous avez besoin de quelque chose de générique, qui ne dépend pas d'une convention d'affectation de noms.

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

JavaScript

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

Answer 4

    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

Answer 5

$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

Vous pouvez modifier la catégorie d'images à partir de la première ligne. Si vous avez besoin de plus les classes d'image (ou autre chemin d'accès), vous pouvez utiliser

$('img.over, #container img, img.anotherOver').each(function(){

et ainsi de suite.

Cela devrait fonctionner, je n'ai pas le tester :)