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.
Bunlar da İlginizi Çekebilir
Hoşgeldiniz!
Son teknoloji haberlerinden, yazılım ve donanım incelemelerine, çeşitli fırsatlardan kampanya duyurularına kadar birçok konunun yer aldığı kişisel web siteme hoşgeldiniz.
Takipte Kalın!
Kişisel sitemdeki güncelleştirmelerden, haber ve yeniliklerden anında haberdar olmak çok kolay.
Mini blog sitesi Twitter'da site güncelleştirmelerini takip edebilirsiniz.
Facebook'ta sayfamı beğenerek haber paylaşımlarımı hesabınızdan takip edebilirsiniz.
İletişim sayfasını kullanarak bana mesaj gönderebilisiniz.
Masaüstü Görünümü
Web sitemi şu anda Mobil Görünüm'de geziyorsunuz.
Geniş ekranlı cihazınızdan geziniyorsanız Masaüstü Görünümü'ne geçmek için tıklayın.