Jquery ve css ile hareketli button yapmak

Aradan geçen yaklaşık 3 haftada elimde olmayan nedenlerden ötürü yazılarımı devam edememiştim. Yazılarıma yazmaya bu yazıyla devam ediyorum. Bu yazımda Jquery ve css ile hareketli button nasıl yapılır baştan sona anlattım. Yan resimdeki örnekte olduğu gibi resimlerden oluşan buttonlar olacak ve fare imleci üzerine geldiğinde button yukarı doğru çıkıp kendini gösterecek. Resimlere ve buttonlara css kullanarak stil (style) vereceğiz ayrıca olayları Jquery kütüphanesini kullanarak gerçekleştireceğiz.

Örneğe geçmeden önce hazırladığım demoyu buradan inceleyebilirsiniz.

Buttonları resimlerden oluşacağı için resimleri a etiketinin içine atıyoruz. a etiketlerini ise div katmanın içine atıyoruz. div katmanın içine koyma nedenim fare hareketini algılacayacak bir katmanın gerekmesi. Ayrıca buttonların yan yana durması için div katmanlarının float stil (style) özelliğini left yapmalıyız. Tabii bunun dışında buttonların görünümünü düzeltmek için gerekli css özelliklerini ayarlamalıyız. Ben daha rahat olması amacıyla iki adet style class yarattım.

Kullanacağımız buttonların yapısı:

<div class="hb">
 <a title="Türkçe"  href="#">
  <img class="img-b" border="0" src="1.png" alt="button 1" />
 </a>
</div>
<div class="hb">
 <a title="Italiano" href="#">
  <img class="img-b" border="0" src="2.png" alt="button 2" />
 </a>
</div>
<div class="hb">
 <a title="Deutsch" href="#">
  <img class="img-b" border="0" src="3.png" alt="button 3" />
 </a>
</div>
<div class="hb">
 <a title="English" href="#">
  <img class="img-b" border="0" src="4.png" alt="button 4" />
 </a>
</div>

Css özellikleri:

 
   .hb
   {
   height:25px;
   margin:2px;
   float:left;
   overflow:hidden;
   }
 
   .img-b
   {
   margin-top:15px;
   }

Örnekte 4 adet resim kullandım. Her resmin yüksekliği 25 px . Siz kendi resminizin yüksekliğine göre bunu ayarlamalısınız. Resimleri transparan olması için png formatında kaydettim. Bu şekilde buttonlar aşağı şekildeki gibi gözükecek:

Şimdi Jquery kütüphanesi ile olaylar yaratıp üstünde fare imleci resmin üzerinde olduğunda margin-top css özelliğini değiştirerek hareket verelim. Yaratacağımız olaylar mouseover ve mouseout olacak. Jquery kodumuz:

 
$(function (){

	$(".hb").mouseover(function (){
	
			$(this).find("img").css("margin-top","4px");
	
		}

	).mouseout(function (){
	
			$(this).find("img").css("margin-top","15px");
	
		}

	);

});

Fare buttonun üstünde geldiğinde:

jquery-css-hareketli-button-görünümü-harekethali

Jquery ve css ile hareketli button uygulaması bitirmiş olduk. Uygulamayı hem Firefox hem de Internet Explorer'da çalıştırabildim. Uygulamanın dosyalarını buradan indirebilirsiniz.