Jquery ile Daha Güzel Bilgi Balonları
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.
Web sitemi şu anda Masaüstü Görünümü'nde geziyorsunuz.
Mobil cihazınızdan geziniyorsanız Mobil Görünüm'e geçmek için 
En popüler kelime oyununda yarışmaya hazırsanız buraya 
Aradığınız ürünü akılınızdaki fiyata bulun. Hemen şimdi 
Mini blog sitesi 
Anlamadım hocam nasıl yapacaığımızı :D
Link değiştirildi, şimdi indirebilirsiniz.
linke ulaşamıyorum
dostum link kırık.:)düzeltirsen seviniriz.