MyDesign | Kod Arşivi - Anasayfaya Dön   No banner in farm
Anasayfa Araştır Forum Gelişmiş Arama Siteniz İçin En Hit İçerikler RSS İçerik Ekle Scriptler Destekleyenler Kadromuz Reklam İletişim Giriş Sayfası Yap  Sık Kullanılanlara Ekle
Bu Kategorinin En Yeni Kodları:


Bu Kategorinin En Çok Görüntülenen Kodları:






Arama:
Gelişmiş Arama


No banner in farm



En Çok Görüntülenen Kodlar:


Üye Girişi:
 Ü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
Gönderen : mYavuz
Telif : PsychoCoder
Tarih : 09 Eylül 2009
Örnek Dosya : Bulunmamakta
Okunma Sayısı : 15460
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) için yazılan 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:



Bağlantılar:


En Son Yorumlanan İçerikler:


Murat Yavuz | Site Haritası | Gizlilik Bildirimi | 54.204.106.194 | 0,11 Saniye
© Copyright 2004-2017 MyDesign | Kod Arşivi. Tüm Hakları Saklıdır.
MyDesign | Kod Arşivi, en iyi görünüm için, 1024x768 ve üzeri çözünürlük tavsiye eder.