Αλλαγή της πηγής της εικόνας κατά το rollover με χρήση jQuery

Έχω μερικές εικόνες και τις εικόνες ανατροπής τους. Χρησιμοποιώντας jQuery, θέλω να εμφανίσω/αποκρύψω την εικόνα rollover όταν συμβεί το γεγονός onmousemove/onmouseout. Όλα τα ονόματα των εικόνων μου ακολουθούν το ίδιο μοτίβο, όπως αυτό:

Αρχική εικόνα: Image.gif

Rollover Image: Imageover.gif

Θέλω να εισαγάγω και να αφαιρέσω το τμήμα "over" της πηγής εικόνας στο συμβάν onmouseover και onmouseout, αντίστοιχα.

Πώς μπορώ να το κάνω χρησιμοποιώντας την jQuery;

lowtechsun
Επεξεργασμένη ερώτηση Κάνε Απρίλιος 2016 в 10:12
Προγραμματισμός
html jquery
Κάνε Φεβρουάριος 2009 в 7:28
11 προβολές
Λύση

Για να προετοιμαστείτε για το έτοιμο:

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

Για όσους χρησιμοποιούν πηγές εικόνων url:

$(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
Επεξεργασμένη απάντηση Κάνε Ιανουάριος 2019 в 4:41
Σχόλια (10)

Ξέρω ότι ρωτάτε για τη χρήση της jQuery, αλλά μπορείτε να επιτύχετε το ίδιο αποτέλεσμα σε προγράμματα περιήγησης που έχουν απενεργοποιημένη τη JavaScript χρησιμοποιώντας 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);
}

Υπάρχει'μια μεγαλύτερη περιγραφή εδώ

Ακόμα καλύτερα, ωστόσο, είναι να χρησιμοποιήσετε sprites: simple-css-image-rollover

ankit suthar
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2017 в 11:24
Σχόλια (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
    });
});

Μπορεί να θέλετε να αλλάξετε την κατηγορία των εικόνων από την πρώτη γραμμή. Αν χρειάζεστε περισσότερες κλάσεις εικόνων (ή διαφορετική διαδρομή) μπορείτε να χρησιμοποιήσετε

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

και ούτω καθεξής.

Θα πρέπει να δουλέψει, δεν το δοκίμασα :)

pawelmech
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2011 в 2:40
Σχόλια (3)