jQuery‘i ve onun geliÅŸtiricilerin hayatını kolaylaÅŸtırma yöntemlerini seviyorum. Her ne kadar jQuery’i kabullenmek benim biraz zamanımı alsa ve halen kendi ihtiyacım olan kodları kendim yazmayı tercih etsem de, jQuery’nin avantajlarını inkar edemem. Son zamanlarda fare imlecini bir baÄŸlantı üzerine getirdiÄŸimde imaj önizlemesini görüntülemem gereken bir proje aldım. Biliyorsunuz, hani ÅŸu link üzerine farenizi götürdüğünüzde çıkan kutucuklar içerisinde imaj görüntülenmesi. Halihazırda o proje üzerinde jQuery kullanılıyor olmasından ötürü bunu bir fırsat olarak gördüm ve bu geliÅŸmiÅŸ kütüphane ile neler yapılabileceÄŸini araÅŸtırmaya koyuldum. Bir süre sonra da çok basit bir betik hazırlarken buldum kendimi. Bugün, size bu çok ama çok basit betiÄŸi kullanarak oluÅŸturulmuÅŸ 3 örneÄŸi göstereceÄŸim.
Ö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.
<a href="http://www.hafif.org" 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.
<a href="1.jpg" class="preview"><img 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.
<a href="http://www.cssglobe.com" 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:
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine"> Css Globe</a>
Betiği uygulama üzerinde görün
Kaynak: CSS Globe
