Ändern Sie die Bildquelle beim Rollover mit jQuery

Question

Ich habe ein paar Bilder und ihre Rollover-Bilder. Mit jQuery möchte ich das Rollover-Bild anzeigen/ausblenden, wenn das Onmousemove/Onmouseout-Ereignis eintritt. Alle meine Bildnamen folgen dem gleichen Muster, wie diese:

Originalbild: Image.gif

Rollover-Bild: Imageover.gif

Ich möchte die "vorbei" Teil der Bildquelle im Ereignis onmouseover bzw. onmouseout.

Wie kann ich das mit jQuery machen?

Answer 1

Zum Einrichten auf bereit:

$(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);
        });
});

Für diejenigen, die Url-Bildquellen verwenden:

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });

Answer 2

Ich weiß, dass Sie nach der Verwendung von jQuery fragen, aber Sie können den gleichen Effekt in Browsern, die JavaScript ausgeschaltet haben, mit CSS erzielen:

#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);
}

Es gibt eine längere Beschreibung aquí

Noch besser ist es jedoch, Sprites zu verwenden: einfaches-css-bild-rollover

Answer 3

Wenn Sie mehr als ein Bild haben und etwas Generisches brauchen, das nicht von einer Namenskonvention abhängt.

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
    });
});

Vielleicht möchten Sie die Klasse der Bilder in der ersten Zeile ändern. Wenn Sie mehr Bildklassen (oder einen anderen Pfad) benötigen, können Sie

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

und so weiter.

Es sollte funktionieren, ich habe es nicht getestet :)