JQuery kullanarak fareyle üzerine gelindiğinde görüntü kaynağını değiştirme

Birkaç resmim ve bunların rollover görüntüleri var. JQuery kullanarak, onmousemove / onmouseout olayı gerçekleştiğinde rollover görüntüsünü göstermek / gizlemek istiyorum. Tüm resim adlarım aşağıdaki gibi aynı kalıbı takip ediyor:

Orijinal görüntü: Image.gif

Rollover Resmi: Imageover.gif

Görüntü kaynağının "aşırı" kısmını sırasıyla ve daha fazla olayda ve son derece olay üzerinde eklemek ve kaldırmak istiyorum .

JQuery kullanarak nasıl yapabilirim?

Hazır kurulum için:

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

URL resim kaynaklarını kullananlar için:

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

            });
    });

JQuery'yi kullanmak istediğinizi biliyorum, ancak CSS kullanarak JavaScript'in kapalı olduğu tarayıcılarda da aynı etkiyi elde edebilirsiniz:

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

Burada daha uzun bir açıklama var

Ancak daha da iyisi sprite kullanmaktır: simple-css-image-rollover

Birden fazla görüntünüz varsa ve bir adlandırma kuralına bağlı olmayan genel bir şeye ihtiyacınız varsa.

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

Sizi "bu resim" ve "bu resim" ile sınırlamayan genel bir çözüm, HTML kodunun kendisine "aşırı" ve "aşırı" etiketler eklemek olabilir.

HTML

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

JavaScript

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

Kurulumunuza bağlı olarak, bunun gibi bir şey daha iyi çalışır (ve daha az HTML değişikliği gerektirir).

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

İlk satırdaki görüntü sınıfını değiştirmek isteyebilirsiniz. Daha fazla görüntü sınıfına (veya farklı yola) ihtiyacınız varsa,

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

ve bunun gibi.

Çalışmalı, test etmedim :)

Ben bir über bir astar umuyordum:

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

Aradığınız çözüm animasyonlu bir düğmeyse, performansı artırmak için yapabileceğiniz en iyi şey sprite ve CSS kombinasyonudur. Sprite, sitenizdeki tüm resimleri (başlık, logo, düğmeler ve sahip olduğunuz tüm süslemeler) içeren büyük bir resimdir. Sahip olduğunuz her resim bir HTTP isteği kullanır ve ne kadar çok HTTP isteği olursa o kadar fazla yüklenir.

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

0px 0pxKoordinatlar senin sprite kalan üst köşesi olacak.

Ancak Ajax veya bunun gibi bir şeyle fotoğraf albümü geliştiriyorsanız, JavaScript (veya herhangi bir çerçeve) en iyisidir.

İyi eğlenceler!

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

Bir süre önce bir çözüm ararken, aşağıya benzer bir senaryo buldum, ki bazı düzeltmelerden sonra benim için çalıştım.

Farenin görüntünün kapalı olduğu (image-example_off.jpg) hemen hemen her zaman varsayılan olan iki görüntüyü ve farenin üzerine geldiği zamanlar için gerekli alternatif görüntüyü ( image-example_on.jpg) görüntülendi.

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

Aşağıdaki kod gibi bir şey yaptım :)

Yalnızca _hover adında ikinci bir dosyanız olduğunda facebook.pngvefacebook_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();

Richard Ayotte'nin kodundan uyarlanmış - ul / li listesindeki bir img'yi (burada sarmalayıcı div sınıfı aracılığıyla bulunur) hedeflemek için, şöyle bir şey:

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