Ö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..
Merhaba Hocam,
YanıtlaSilmauseover/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;
}
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