Changer la source de l'image au moment du survol en utilisant jQuery

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

Image originale : Image.gif

Rollover Image : Imageover.gif

Je veux insérer et supprimer la partie "over" de l'image source dans les événements onmouseover et onmouseout, respectivement.

Comment puis-je le faire en utilisant jQuery ?

lowtechsun
Question modifiée 18 avril 2016 в 10:12
Programmation
html jquery
12 février 2009 в 7:28
9 vues
Solution

Pour s'installer sur le prêt :

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

Pour ceux qui utilisent des sources d'images 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
Réponse modifiée 4 janvier 2019 в 4:41
Commentaires (10)

Je sais que votre question porte sur l'utilisation de jQuery, mais vous pouvez obtenir le même effet dans les navigateurs où JavaScript est désactivé en utilisant 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 existe une description plus longue [ici][1].

Mais ce qui est encore mieux, c'est d'utiliser des sprites : [simple-css-image-rollover][2]

[1] : http://tutorials.alsacreations.com/imgreactive/ [2] : http://www.findmotive.com/2006/10/31/simple-css-image-rollover/

ankit suthar
Réponse modifiée 8 septembre 2017 в 11:24
Commentaires (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
    });
});

Vous pouvez changer la classe des images à partir de la première ligne. Si vous avez besoin de plus de classes d'images (ou d'un chemin différent) vous pouvez utiliser

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

et ainsi de suite.

Cela devrait fonctionner, je ne l&#8217ai pas testé :)

pawelmech
Réponse modifiée 15 mars 2011 в 2:40
Commentaires (3)