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

J’ai quelques images et leurs images survolées. 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 schéma, comme ceci:

Image originale: Image.gif

Image Imageover.gif : Imageover.gif

Je souhaite insérer et supprimer la partie “over” de la source d’image dans l’événement onmouseover et onmouseout, respectivement.

Comment puis-je le faire en utilisant jQuery?

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

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

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

    

JavaScript

 $('img').bind('mouseenter mouseleave', function() { $(this).attr({ src: $(this).attr('data-other-src') , 'data-other-src': $(this).attr('src') }) }); 
  /* Teaser image swap function */ $('img.swap').hover(function () { this.src = '/images/signup_big_hover.png'; }, function () { this.src = '/images/signup_big.png'; }); 

Une solution générique qui ne vous limite pas à “cette image” et à “cette image” seulement peut être d’append les balises “onmouseover” et “onmouseout” au code HTML lui-même.

HTML

  

JavaScript

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

Selon votre configuration, quelque chose comme ça fonctionnerait peut-être mieux (et nécessiterait moins de modification HTML).

HTML

    

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"] = "http://soffr.miximages.com/jquery/img1.jpg"; imgList["ref1"]["over"] = "img2.jpg"; imgList["ref2"]["out"] = "http://soffr.miximages.com/jquery/img3.jpg"; imgList["ref2"]["over"] = "img4.jpg"; imgList["ref3"]["out"] = "http://soffr.miximages.com/jquery/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"]); } 
 $('img.over').each(function(){ var t=$(this); var src1= t.attr('src'); // initial src var newSrc = src1.subssortingng(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 des 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é 🙂

J’espérais un doublé comme:

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

Si la solution que vous recherchez est un bouton animé, le mieux que vous puissiez faire pour améliorer les 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 nécessaire pour le charger 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 du genre, alors JavaScript (ou tout autre framework) est le meilleur.

S’amuser!

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

En cherchant une solution il y a quelque temps, j’ai trouvé un script similaire à celui ci-dessous, qui après quelques ajustements, m’a permis de travailler.

Il gère deux images, qui sont presque toujours désactivées par défaut (image-example_off.jpg), et occasionnellement “on”, où la souris est survolée, l’image alternative requirejse ( image-example_on.jpg) est affiché.

  
     JQuery      

J’ai fait quelque chose comme le code suivant 🙂

Cela ne fonctionne que lorsque vous avez un deuxième fichier nommé avec _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); }); 
  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(); 

Adapté du code de Richard Ayotte – Pour cibler un img dans une liste ul / li (trouvée via la classe wrapper div 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') } );