Jquery ile Daha Güzel Bilgi Balonları

12 Ağu 2010 Per 4 yorum

Başlık özelliğine sahip HTML elementlerinin üzerine gelindiğinde görülen bilgi balonlarını değiştirebilirsiniz.

Kişisel sitemdeki linklerin üzerine gelindiğinde ortaya çıkan bilgi balonlarını görmüş olmalısınız. Şimdi bunu kendi sitenize nasıl ekleyeceğinizi anlatıyorum.
 

Özellikleri:

  • Tüm tarayıcılarda çalışır.
  • Öğenin sayfadaki durumuna göre balonları altta veya üstte gösterebilir.
  • Balon gösterimindeki efektler değiştiriebiliyor.

 

Kurulum:

Aşağıdaki dosyaları sitenizin kök klasörüne kopyalaın. Aslında dosyaları daha önce belirlediğiniz yerlere de kopyalayabilirsiniz, fakat buna göre HTML ve CSS dosyalarındaki adreslerde değişiklik yapmalısınız.

  • tip.css
  • jquery-1.4.2.min.js
  • jquery.tools.min.js
  • black_arrow.png
  • black_arrow_bottom.png

 

Kullanım:

Aşağıdaki kodları sayfanızın <head></head> etiketleri arasına ekleyin.

<link href="tip.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type='text/javascript' src='jquery.tools.min.js'></script>

<script type="text/javascript">
$(document).ready(function()
{
   $("a.tipted[title]").tooltip({

   offset: [10, 2],

   effect: 'slide'

}).dynamic({ bottom: { direction: 'down', bounce: true } });

});
</script>

Javascript fonksiyonundaki a.tipted[title] ifadesi "tipted" stiline sahip linklerdeki "title" bilgilerinin yeni oluşturduğumuz bilgi balonlarına dönüştürüleceğini gösteriyor. Siz isterseniz farklı CSS seçiciler kullanabilirsiniz. Örneğin img[title] olarak değiştirdiğinizde sadece resimlerdeki "title" bilgileri yeni bilgi balonlarına dönüşür. Yine isteğinize göre DIV, SPAN gibi elementleri de kullanabilirsiniz.

Önizlemesini izlemek için bu linkin üzerine gelin.

Yazıda geçen dosyaları indirmek için tıklayın.

19784 kez okundu.

4 Yorum Var

  1. Çağatay Karahan demiş ki

    Anlamadım hocam nasıl yapacaığımızı :D

  2. Ahmet Soyarslan demiş ki

    Link değiştirildi, şimdi indirebilirsiniz.

  3. mustafa demiş ki

    linke ulaşamıyorum

  4. hkn hkn demiş ki

    dostum link kırık.:)düzeltirsen seviniriz.



Yorum Yazın