23 Ağustos 2010 Pazartesi

jQuery ile Basit Mouseover Efekti

Öncelikle bu makalemizde basitçe jQuery'nin .hover ve .attr api'leri hakkında bilgi vereceğiz ve yine basit örnekle resime mouseover ve mouseout efekti vereceğiz. Bu işlemi farklı metodlarla da yapmak mümkün, temiz bir html ve resmin indexlenebilirliğini arttırmak adına bu yöntemi  seçtim. Amaç jQuery mantığını aklımıza yerleştirmek..



Öncelikle basitçe jQuery api'lerimizden bahsedelim ve sonra da örneğimize geçelim.

jQuery .Hover Kullanımı


Herhangi bir nesnenin fare ile üzerine gelme ve üzerinden ayrılma (over / out) işlemi için jQuery'de bu api kullanılabilir. Bu işlem için farklı api'lerde mevcuttur.
$("#nesne").hover(
function () {
// fare gelince (over) yapılacaklar..
},
function () {
// fare gidince (out) yapılacaklar..
}
);

Gayet açık bir kullanım şekli mevcut. Bunun yanında sadece fare gelince şeklinde de kullanılabilir. Bunun için de;
$("nesne").hover(
function () {
// fare gelince (over) işlemi yap ve bitir..
}
);

jQuery .attr Kullanımı


Herhangi bir nesnenin (tag) alt özelliği üzerinde oynama yapmak için kullanılan jQuery api'sidir.
$('#resim').attr('src', '/resimler/menu-on.png');
..veya..
$('#nesne a').attr('href', '/yeni-link.html');
..veya..
$('button').attr('disabled','disabled');

Örneklerde de gördüğünüz gibi tagların alt özelliklerini değiştirmeye yarıyor.

Basit Mouseover/out Efekti


Birçok yerde ihtiyaç duyduğumuz fare ile üzerine gelince ve üzerinden çekince efektini basitçe örnekleyelim;
<script  type='text/javascript'>
$(document).ready(function(){
$("#resim").hover(
function() {
$(this).attr("src","/img/menu-on.png");
},
function() {
$(this).attr("src","/img/menu-off.png");
}
);
});
</script>

burada #resim1 adındaki <img id="resim" /> resminin üzerine farenin gelmesi ve gitmesi sonrası yapılan işlemi görebilirsiniz. Faydalı bir döküman olmadı dileklerimle..

NOT: Lütfen bu gibi konularda eksiklerimizi gidermek, yeni makalelerde konu seçiminde dikkat etmek adına fikir ve görüşlerinizi mutlaka bize iletin.

Saygılar..

2 yorum:

  1. Merhaba Hocam,

    mauseover/mauseout efekti çalışmıyor hocam nerde yanlış yaptım çözemedim. Yardımcı olursanız çok makbule geçer.




    $(document).ready(function(){
    $("#logo").hover(
    function() {
    $(this).attr("src","/imaj/atak.png");
    },
    function() {
    $(this).attr("src","/imaj/atak2.png");
    }
    );
    });











    css stil dosyası kod..

    #logo{
    width:164px;
    height:50px;
    background:url(imaj/atak.png) no-repeat;
    }

    YanıtlaSil
  2. hover işlevinin amacı mouse ilgili etikete geldiğinde yapacağı işlemdir. Hem css ile arkaplan ekleyip hem de mouse hover ile aynı resim çıktığı için değişen birşey olmayacaktır. Mantığı kurgulamak çok önemli. Css ile sadece mouse gelmeden önce arkaplan resmi verilmeli daha sonra da hover ile mouse etiketin üzerine geldiğinde yapılacak değişiklik belirtilmelidir.

    YanıtlaSil