MyDesign | Kod Arivi - Anasayfaya Dn   No banner in farm
Anasayfa Aratr Forum Gelimi Arama Siteniz in En Hit erikler RSS erik Ekle Scriptler Destekleyenler Kadromuz Reklam letiim Giri Sayfas Yap  Sk Kullanlanlara Ekle
Bu Kategorinin En Yeni Kodlar:


Bu Kategorinin En ok Grntlenen Kodlar:






Arama:
Gelimi Arama


No banner in farm



En ok Grntlenen Kodlar:


ye Girii:
 ye Ol



Anasayfa > Ajax - Atlas > Kodlar

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

class="rOver" etiketini eklediğiniz resimlerin üzerine gelince, aynı resmin, ismi _over ile biten halini gösterir. Örneğin resim.jpg üzerine gelince resim_over.jpg gösterilir.

jquery  ajax  rollover  ImageRollover 

Kategori : Ajax - Atlas
Gnderen : mYavuz
Telif : PsychoCoder
Tarih : 09 Eylül 2009
rnek Dosya : Bulunmamakta
Okunma Says : 17417
Puan
: 8 / 10 (6 Oy)
Puan Verin :
Google Bookmarks  del.icio.us  Digg  Yahoo! MyWeb  Windows Live  Furl
 
 
İ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.
 
 

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

Alperen Polat  { 16 Mayıs 2012 }
Dostum Amma Kastın Yaa ben sana daha basit kodu yolluyorum bunla yap bari :))

<script type="text/javascript">

$(document).ready(function(){

$(".uruntab").css({
"border" : "solid #d8d8d8 1px",
"background-color":"#fff"
}).mouseover(function(){
$(this).css({
"border" : "solid #bc6c6c 1px",
"background-color": "#fff"
});
}).mouseout(function(){
$(this).css({
"border" : "solid #d8d8d8 1px",
"background-color":"#fff"
});
});
});

</script>

ahmet er  { 08 Nisan 2012 }
selamın aleykum .. benım odevm var.. odev html ve java scrıpt dekı jquery kutuphanesıyle yapılacak...


odevın ; fareyle yanı ımlecle bır topu kutunun ıcerısıne koyan web sayfası.. kutu sabıt bır şekılde kalacak .. topuda ıstenılen sekılde -- serbest bır sekılde oynatabılecegız... kutunun ıcerısene geldıgımızde kutunun ıcerısene gırecek... bunu nasıl yapabılırım.. yada bana yardımcı olur musunuz ...?

dersbikkini  { 28 Şubat 2011 }
ben bu resim işinden anlamadım ya ?

Cevher Beydilli  { 04 Temmuz 2010 }
JQuery ile daha farklı uygulamaları aşağıdaki adreslerde bulabilirsiniz..
:)
http://www.deliningunlugu.tk/?p=924
http://www.deliningunlugu.tk/?p=1282
http://www.deliningunlugu.tk/?p=809

ali veli   { 10 Ekim 2009 }
Fare ile bu resmin üzerine gelince, ornek_resim_over.gif gösterilir.

Yorum ekleyin

Anasayfa > Ajax - Atlas > Kodlar > JQuery ile Rollover (Fare ile üzerine gelince resmin değişmesi)
Kategoriler:


Forum:



Balantlar:



    En Son Yorumlanan erikler:


    Murat Yavuz | Site Haritas | Gizlilik Bildirimi | 34.204.176.125 | 0,14 Saniye
    © Copyright 2004-2020 MyDesign | Kod Arivi. Tm Haklar Sakldr.
    MyDesign | Kod Arivi, en iyi grnm iin, 1024x768 ve zeri znrlk tavsiye eder.