Aydın Yakar

Ö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..

23 Ağustos 2010 Pazartesi, 7:34 pm   |   jQuery, Webmaster  |  RSS feed |  Respond  |  Trackback