Verander de bron van de afbeelding bij rollover met behulp van jQuery

Ik heb een paar afbeeldingen en hun rollover afbeeldingen. Met behulp van jQuery, wil ik de rollover afbeelding tonen/verbergen wanneer de onmousemove/onmouseout gebeurtenis plaatsvindt. Al mijn afbeeldingsnamen volgen hetzelfde patroon, zoals dit:

Original Image: Image.gif

Rollover afbeelding: Imageover.gif

Ik wil het "over" gedeelte van de afbeeldings bron invoegen en verwijderen in het onmouseover en onmouseout event, respectievelijk.

Hoe kan ik dat doen met jQuery?

lowtechsun
Bewerkte vraag 18de0 april 2016 в 10:12
Programmering
html jquery
12de3 februari 2009 в 7:28
15 views
Oplossing

Om klaar te staan:

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

Voor degenen die url beeldbronnen gebruiken:

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

            });
    });
jemmamariex3
Bewerkt antwoord 4de4 januari 2019 в 4:41
Commentaren (10)

Ik weet dat je vraagt naar het gebruik van jQuery, maar je kunt hetzelfde effect bereiken in browsers waar JavaScript is uitgeschakeld met 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);
}

Er's een langere beschrijving hier

Nog beter is het echter om sprites te gebruiken: simple-css-image-rollover

ankit suthar
Bewerkt antwoord 8ste4 september 2017 в 11:24
Commentaren (6)
 
$('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
    });
});

U kunt de klasse van de afbeeldingen wijzigen vanaf de eerste regel. Als u meer afbeeldingsklassen nodig heeft (of een ander pad) kunt u

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

enzovoort.

Het zou moeten werken, ik heb het niet getest :)

pawelmech
Bewerkt antwoord 15de1 maart 2011 в 2:40
Commentaren (3)