web-dev-qa-db-fra.com

Changer la source de l'image lors du basculement à l'aide de jQuery

J'ai quelques images et leurs images de roulement. Avec jQuery, je souhaite afficher/masquer l’image de survol lorsque l’événement onmousemove/onmouseout se produit. Tous mes noms d'images suivent le même schéma, comme ceci:

Image originale: Image.gif

Image survolée: Imageover.gif

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

Comment puis-je le faire en utilisant jQuery?

jqueryhtml
442
Sachin Gaur

Pour mettre en place:

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

            });
    });
619
Jarrod Dixon

Je sais que vous parlez de l'utilisation de jQuery, mais vous pouvez obtenir le même effet dans les navigateurs dont JavaScript est désactivé avec 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 longue ici

Encore mieux, utilisez des sprites: simple-css-image-rollover

114
Tyson

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

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') 
    })
});
62
Richard Ayotte
    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });
57
jonasl

Une solution générique qui ne vous limite pas à "cette image" et à "cette image" peut consister simplement à ajouter les balises "onmouseover" et "onmouseout" au code HTML lui-même.

HTML

<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />

JavaScript

function swap(newImg){
  this.src = newImg;
}

En fonction de votre configuration, une solution de ce type fonctionnerait peut-être mieux (et nécessiterait moins de modifications HTML).

HTML

<img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />

JavaScript/jQuery

// Declare Arrays
  imgList = new Array();
  imgList["ref1"] = new Array();
  imgList["ref2"] = new Array();
  imgList["ref3"] = new Array();

//Set values for each mouse state
  imgList["ref1"]["out"] = "img1.jpg";
  imgList["ref1"]["over"] = "img2.jpg";
  imgList["ref2"]["out"] = "img3.jpg";
  imgList["ref2"]["over"] = "img4.jpg";
  imgList["ref3"]["out"] = "img5.jpg";
  imgList["ref3"]["over"] = "img6.jpg";

//Add the swapping functions
  $("img").mouseover(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
  }

  $("img").mouseout(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
  }
24
DACrosby
$('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 voudrez peut-être changer la classe d'images de la première ligne. Si vous avez besoin de plus de classes d’images (ou de chemins différents), vous pouvez utiliser

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

etc.

Ça devrait marcher, je ne l'ai pas testé :)

21
Ionuț Staicu

J'espérais un über one liner comme:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));
13
chovy

Si la solution que vous recherchez est un bouton animé, le mieux que vous puissiez faire pour améliorer les performances est la combinaison des sprites et des CSS. Un Sprite est une image énorme qui contient toutes les images de votre site (en-tête, logo, boutons et toutes les décorations que vous avez). Chaque image que vous utilisez utilise une requête HTTP, et plus il y a de requêtes HTTP, plus le temps de chargement est long.

.buttonClass {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -525px;
}

Les coordonnées 0px 0px seront le coin supérieur gauche de vos sprites.

Mais si vous développez un album photo avec Ajax ou quelque chose comme ça, alors JavaScript (ou n’importe quel framework) est le meilleur.

S'amuser!

6
matt

Alors que je cherchais une solution il y a quelque temps, j'ai trouvé un script similaire à celui ci-dessous qui, après quelques ajustements, j'ai travaillé pour moi.

Il gère deux images, dont la valeur par défaut est presque toujours "off", lorsque la souris est désactivée (image-example_off.jpg), et le "sur" occasionnel, où, pour les moments où la souris est survolée, l'image alternative requise ( image-example_on.jpg) est affiché.

<script type="text/javascript">        
    $(document).ready(function() {        
        $("img", this).hover(swapImageIn, swapImageOut);

        function swapImageIn(e) {
            this.src = this.src.replace("_off", "_on");
        }
        function swapImageOut (e) {
            this.src = this.src.replace("_on", "_off");
        }
    });
</script>
4
Kristopher Rout
$('img').mouseover(function(){
  var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif");
  $(this).attr("src", newSrc); 
});
$('img').mouseout(function(){
  var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif");
  $(this).attr("src", newSrc); 
});
4
iamrasec
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }
</style>

<script type="text/javascript">

$(function(){

    $('#box').hover( function(){
        $('#box').css('background', 'url(images/home2.gif)');

    });
    $('#box').mouseout( function(){
        $('#box').css('background', 'url(images/home1.gif)');

    });

});
</script>
</head>

<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html>
3
faruque

J'ai créé quelque chose comme le code suivant :)

Cela ne fonctionne que lorsque vous avez un deuxième fichier nommé _hover, par exemple, facebook.png et facebook_hover.png.

$('#social').find('a').hover(function() {
    var target = $(this).find('img').attr('src');
    //console.log(target);
    var newTarg = target.replace('.png', '_hover.png');
    $(this).find('img').attr("src", newTarg);
}, function() {
    var target = $(this).find('img').attr('src');
    var newTarg = target.replace('_hover.png', '.png');
    $(this).find('img').attr("src", newTarg);
});
2
Grzegorz

Adapté du code de Richard Ayotte - Pour cibler un img dans une liste ul/li (trouvé via wrapper div class ici), quelque chose comme ceci:

$('div.navlist li').bind('mouseenter mouseleave', function() {    
    $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 
    'data-alt-src':$(this).find('img').attr('src') }
);
1
anoldermark
<img src="img1.jpg" data-swap="img2.jpg"/>



img = {

 init: function() {
  $('img').on('mouseover', img.swap);
  $('img').on('mouseover', img.swap);
 }, 

 swap: function() {
  var tmp = $(this).data('swap');
  $(this).attr('data-swap', $(this).attr('src'));
  $(this).attr('str', tmp);
 }
}

img.init();
1
Gustav Westling