Ändern Sie die Bildquelle beim Rollover mit jQuery

Ich habe ein paar Bilder und ihre Rollover-Bilder. Mit jQuery möchte ich das Rollover-Bild ein- / ausblenden, wenn das Ereignis onmousemove / onmouseout auftritt. Alle meine Bildnamen folgen demselben Muster:

Original Bild: Image.gif

Rollover Bild: Imageover.gif

Ich möchte den "Über" -Teil der Bildquelle im Ereignis onmouseover bzw. onmouseout einfügen und entfernen .

Wie kann ich das mit jQuery machen?

So richten Sie fertig ein:

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

Für diejenigen, die URL-Bildquellen verwenden:

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

            });
    });

Ich weiß, dass Sie nach der Verwendung von jQuery fragen, aber Sie können den gleichen Effekt in Browsern erzielen, in denen JavaScript mithilfe von CSS deaktiviert ist:

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

Es gibt eine längere Beschreibung hier

Noch besser ist es jedoch, Sprites zu verwenden: Simple-CSS-Image-Rollover

Wenn Sie mehr als ein Bild haben und etwas Allgemeines benötigen, das nicht von einer Namenskonvention abhängt.

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

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

Eine generische Lösung, die Sie nicht nur auf "dieses Bild" und "dieses Bild" beschränkt, besteht möglicherweise darin, dem HTML-Code selbst die Tags "onmouseover" und "onmouseout" hinzuzufügen.

HTML

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

JavaScript

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

Abhängig von Ihrem Setup funktioniert so etwas möglicherweise besser (und erfordert weniger HTML-Änderungen).

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"]);
  }

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

Möglicherweise möchten Sie die Klasse der Bilder in der ersten Zeile ändern. Wenn Sie mehr Bildklassen (oder einen anderen Pfad) benötigen, können Sie diese verwenden

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

und so weiter.

Es sollte funktionieren, ich habe es nicht getestet :)

Ich hatte auf einen über einen Liner gehofft wie:

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

Wenn Sie nach einer animierten Schaltfläche suchen, können Sie die Leistung am besten durch die Kombination von Sprites und CSS verbessern. Ein Sprite ist ein riesiges Bild, das alle Bilder Ihrer Website enthält (Kopfzeile, Logo, Schaltflächen und alle Dekorationen, die Sie haben). Jedes Bild, das Sie haben, verwendet eine HTTP-Anforderung. Je mehr HTTP-Anforderungen vorhanden sind, desto länger dauert das Laden.

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

Die 0px 0pxKoordinaten sind die linke obere Ecke Ihrer Sprites.

Wenn Sie jedoch ein Fotoalbum mit Ajax oder ähnlichem entwickeln, ist JavaScript (oder ein beliebiges Framework) das Beste.

Habe Spaß!

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

Als ich vor einiger Zeit nach einer Lösung suchte, fand ich ein ähnliches Skript wie das folgende, das ich nach einigen Optimierungen für mich arbeiten ließ.

Es werden zwei Bilder verarbeitet, die fast immer standardmäßig "Aus" sind, wenn die Maus vom Bild abweicht (image-example_off.jpg), und gelegentlich "Ein", wenn für die Zeit, in der die Maus bewegt wird, das erforderliche alternative Bild ( image-example_on.jpg) wird angezeigt.

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

<!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>

Ich habe so etwas wie den folgenden Code gemacht :)

Dies funktioniert nur, wenn Sie beispielsweise eine zweite Datei mit dem Namen _hover facebook.pngund habenfacebook_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 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();

Angepasst an Richard Ayottes Code - Um ein Bild in einer ul / li-Liste anzuvisieren (hier über die Wrapper-Div-Klasse zu finden), ungefähr 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') }
);