Ändern Sie die Bildquelle beim Rollover mit jQuery

Question

Ich habe ein paar Bilder und ihre Rollover-Bilder. Mit jQuery möchte ich das Rollover-Bild anzeigen/ausblenden, wenn das Onmousemove/Onmouseout-Ereignis eintritt. Alle meine Bildnamen folgen dem gleichen Muster, wie diese:

Originalbild: Image.gif

Rollover-Bild: Imageover.gif

Ich möchte die "vorbei" Teil der Bildquelle im Ereignis onmouseover bzw. onmouseout.

Wie kann ich das mit jQuery machen?

Answer 1

Ich habe so etwas wie den folgenden Code erstellt :)

Es funktioniert nur, wenn Sie eine zweite Datei haben, die z.B. mit _hover benannt ist, facebook.png y 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);
});

Answer 2

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

Answer 3

Angepasst an den Code von Richard Ayotte - Um ein img in einer ul/li-Liste anzuvisieren (hier über die Wrapper-Div-Klasse gefunden), etwa so:

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