webentwicklung-frage-antwort-db.com.de

Ändern Sie die Bildquelle bei einem 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 eintritt. Alle meine Bildnamen folgen dem gleichen Muster:

Originalbild: Image.gif

Rollover Image: Imageover.gif

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

Wie kann ich das mit jQuery machen?

442
Sachin Gaur

So richten Sie 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);

            });
    });
619
Jarrod Dixon

Ich weiß, dass Sie nach der Verwendung von jQuery fragen, aber Sie können den gleichen Effekt in Browsern erzielen, in denen JavaScript mit 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

114
Tyson

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

Eine generische Lösung, die Sie nicht auf "dieses Bild" und "dieses Bild" beschränkt, besteht möglicherweise darin, die Tags "onmouseover" und "onmouseout" dem HTML-Code selbst 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"]);
  }
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
    });
});

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

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

und so weiter.

Es sollte funktionieren, ich habe es nicht getestet :)

21
Ionuț Staicu

Ich hatte gehofft auf einen Über-One-Liner wie:

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

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 von Ihrer Site enthält (Header, Logo, Schaltflächen und alle Dekorationen, die Sie haben). Jedes Bild, das Sie haben, verwendet eine HTTP-Anfrage. Je mehr HTTP-Anfragen, 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 0px -Koordinaten befinden sich in der linken oberen Ecke Ihrer Sprites.

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

Habe Spaß!

6
matt

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, wobei die Maus nicht im Bild ist (image-example_off.jpg), und gelegentlich "Ein", wobei für die Zeit, in der die Maus über dem Bild gehalten 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>
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

Ich habe so etwas wie den folgenden Code gemacht :)

Dies funktioniert nur, wenn Sie eine zweite Datei mit dem Namen _hover haben, z. B. facebook.png und 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

Angepasst an Richard Ayottes Code:

$('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