Question Changer la source de l'image lors du survol en utilisant jQuery


J'ai quelques images et leurs images de survol. En utilisant jQuery, je veux afficher / masquer l'image de survol lorsque l'événement onmousemove / onmouseout se produit. Tous mes noms d'image suivent le même modèle, comme ceci:

Image originale: Image.gif 

Rollover Image: Imageover.gif

Je veux insérer et enlever le "plus de" partie de la source de l'image dans l'événement onmouseover et onmouseout, respectivement.

Comment puis-je le faire en utilisant jQuery?


439
2018-02-12 07:28


origine


Réponses:


Pour mettre en place 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);
        });
});

615
2018-02-12 07:31



Je sais que vous vous posez des questions sur l’utilisation de jQuery, mais vous pouvez obtenir le même effet dans les navigateurs qui ont désactivé JavaScript 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, cependant, est d'utiliser des sprites: simple-css-image-rollover


113
2018-02-12 07:54



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 nommage.

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

60
2018-02-19 14:23



    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

57
2017-08-02 19:53



Une solution générique qui ne vous limite pas à "cette image" et "cette image" seulement peut être d'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;
}

Selon votre configuration, peut-être que quelque chose comme ça fonctionnerait mieux (et nécessite 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
2018-04-12 04:53



$('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 d'un chemin différent), vous pouvez utiliser

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

etc.

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


21
2018-02-12 07:51



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

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

13
2018-02-24 18:44



Si la solution que vous recherchez est pour un bouton animé, le mieux que vous puissiez faire pour améliorer vos performances est la combinaison de sprites et de 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 avez utilise une requête HTTP, et plus il y a de requêtes HTTP, plus le temps de chargement sera long.

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

le 0px 0px les coordonnées 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
2018-02-11 02:50