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 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. |
||||||
|
||||||
|
May 2013 (1)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
Jquery ile Form ToolTi ..
PHP ile sitemap (site ..
Javascript'de nesne li ..
İş ilanı (Flash ve AS3 ..
Online SMS Gateway ve ..
Jquery ve PHP ile Ajax ..
Jquery AJAX, Mysql ve ..
İlk görev yerim ;)
PHP PEAR MDB2 modulü i ..
ASP.NET ile Google son ..
PHP ile sitemap (site ..
Javascript'de nesne li ..
İş ilanı (Flash ve AS3 ..
Online SMS Gateway ve ..
Jquery ve PHP ile Ajax ..
Jquery AJAX, Mysql ve ..
İlk görev yerim ;)
PHP PEAR MDB2 modulü i ..
ASP.NET ile Google son ..
Etiketler
| .net | Ajax | Animasyon | Araç | Asp.net | Aynı-ip | Bing | C-sharp | C# | Çek-bırak | E-book | Efekt | Gimp | Javascript | Jquery | Json | Kitap | Pixel-renk | Programlama | Resim | Reverse-ip-lookup | Rozet | Scan-host | Smudge | Web-uygulaması | Yağlı-boya | Yaymak | Yükleniyor |arama
Loading
sosyal




