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