jQuery kullanarak rollover sırasında görüntü kaynağını değiştirme

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

Orijinal Görüntü: Image.gif

Rollover Image: Imageover.gif

Sırasıyla onmouseover ve onmouseout olayında görüntü kaynağının "over" kısmını eklemek ve kaldırmak istiyorum.

Bunu jQuery kullanarak nasıl yapabilirim?

lowtechsun
Edited question 2016ööp12öö10 Nisan 2016 в 10:12
Programlama
html jquery
2009ööp28öö7 Şubat 2009 в 7:28
20 görünümler
Çözüm

Hazır hale getirmek 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 görüntü kaynakları 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);

            });
    });
jemmamariex3
Edited answer 2019ööp41öö4 Ocak 2019 в 4:41
Yorumlar (10)

JQuery kullanmayı sorduğunuzu 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);
}

Daha uzun bir açıklama var burada

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

ankit suthar
Edited answer 2017ööp24öö11 Eylül 2017 в 11:24
Yorumlar (6)
 
$('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 resimlerin sınıfını değiştirmek isteyebilirsiniz. Daha fazla resim sınıfına (veya farklı yola) ihtiyacınız varsa

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

ve bunun gibi.

Çalışması gerekir, test etmedim :)

pawelmech
Edited answer 2011ösp40ös14 Mart 2011 в 2:40
Yorumlar (3)