Üye Kayıt Üye Giriş

KATEGORİLER

JQuery ile Rollover (Fare ile üzerine gelince resmin değişmesi)


JQuery ile Rollover (Fare ile üzerine gelince resmin değişmesi)

İlk olarak aşağıda yazılı işlemleri sırayla yapınız.

1) http://jquery.com adresinden JQuery'nin son sürümünü indirin
2) Efekt uygunmasını istediğiniz resimlere class="rOver" etiketini ekleyin.
Örnek: <img src="resim.jpg" class="rOver" />
3) Her resmin aynı isimde, _over ile biten bir kopyası bulunmalıdır. Örneğin resim.jpg ise üzerine gelince gösterilecek resim resim_over.jpg'dir.

Kod:
--------- rollover.js dosyası kodları
IMG = {};

IMG.ImageRollover =
{
init: function()
{
this.preload();

$(".rOver").hover(
function()
{
$(this).attr( 'src', IMG.ImageRollover.HoverImg($(this).attr('src')));
},
function()
{
$(this).attr( 'src', IMG.ImageRollover.NormalImg($(this).attr('src')));
}
);
},

preload: function()
{
$(window).bind('load', function()
{
$('.rOver').each( function(key, elm)
{
$('<img>').attr('src', IMG.ImageRollover.HoverImg( $(this).attr('src')));
});
});
},

HoverImg: function(src)
{
return src.substring(0, src.search(/(\.[a-z]+)/)) + '_over' + src.match(/(\.[a-z]+)/)[0];
},
NormalImg: function(src)
{
return src.replace(/_over/, '');
}
};


--------- Bu kısmı sayfanın <head> </head> kodları arasına yerleştirin
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rollover.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
IMG.ImageRollover.init();
});
</script>


Örnek kullanım:
<img src="ornek_resim.gif" class="rOver" />
Fare ile bu resmin üzerine gelince, ornek_resim_over.gif gösterilir.

Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

jquery ile rollover fare ile üzerine gelince resmin değişmesi