Üç farklı tooltip kullanımı
Url ön izleme, resim ön izleme ve yazı bilgilendirme gibi özellikleri bulunan üç adet hazır örnek uygulamalar aşağıdadır.
Özellikler ve Prensipler
Bu betiğin yaptığı şey bir öğe üzerine fare imlecinizi götürdüğünüzde gövdeye bir element yerleştirmek. Bu elementin nasıl görüntüleneceği CSS ile tanımlanıyor (mutlak (absolute) konumlandı ve üzerine stil uygulandı) ve bu sayede bizim tek yapmamız gereken o elementi bir içerik ile doldurmak, fare pozisyonunu hesaplamak ve ona uygun olarak elementi hareket ettirmek. Fare imleci nesne üzerine götürüldüğünde, içeriğindeki element de onunla birlikte hareket ediyor ve fare imleci elementin üzerinden kaldırıldığında, içeriğindeki element siliniyor.
Bu betiği uygulama üzerinde görebileceğiniz birkaç örnek:
Örnek 1: Bugüne kadarki en basit jQuery Tooltip (İpucu)
Bu betik A etiketinin başlığını (title etiketinin değerini) alıyor ve açılır elementin içerisine yerleştiriyor.
class="tooltip" title="meraklı ol!">ipucu için farenizi
buraya sürükleyin</a>
Betiği uygulama üzerinde görün
Örnek 2: Resim Önizleme Galerisi
Burada bir dizi önizleme resmimiz bulunuyor. Her önizleme resminin üzerine fare imleci getirildiğinde betiğimiz, önizleme resminin bağlantıladığı resmi görüntüleyecek. Bu yöntem içeriği erişilebilir kılıyor aynı zamanda, zira JavaScript'in aktif olmadığı tarayıcılar ve sistemler üzerinde de bağlantıya tıkladığınızda resmin kendisine ulaşabilyorsunuz.
src="1s.jpg" alt="gallery thumbnail" /></a>
Betiği uygulama üzerinde görün
Örnek 3: URL Önizlemesi İçeren Bağlantılar
Bu yöntem biraz daha uğraş gerektiriyor ancak sitenize fazladan bir özellik eklemek istiyorsanız buna değer. Burada ihtiyacınız olan şey hedef URL'nin bir ekran görüntüsü. İlgili sitenin ekran görüntüsünü A etiketinin REL değerine girdikten sonra betiğimiz işin geri kalanını halledecek.
class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>
Yine eğer önizleme resmine bir açıklama eklemek istiyorsanız o zaman TITLE değerini doldurabilirsiniz:
class="screenshot" rel="cssg_screenshot.jpg" title="Web
Standards Magazine"> Css Globe</a>
Betiği uygulama üzerinde görün
Kaynak: CSS Globe
Yorumlar
Yinede sağolun. Bunun gibi bir eklenti vs. aradım bulamadım bir türlü.
Tam aradığım şey bu.
D7 kullanıyorum. Acaba açık açık anlatırmısınız kurulumunu. Bekliyorum cevabınızı.
Nasıl kuracağım.
Askerlik dolayısı ile D7 ye bakamadım yardımcı olamayacağım özür dilerim.
Yeni yorum veya soru gönder