yaptığınız site tasarımlarında bir sözcük, bağlantı veya görsel öğe ile ilgili ek bir bilgi vermek isteyebilirsiniz. bunu doğrudan metin ile sağlamak yerine daha dekoratif, daha profesyonel teknikler mevcut. bu tekniklerden biri de ipucu balonları. her ne kadar pek balon gibi gözükmeseler de bu uygulamalardan 11’i şurada listelenmiş.
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
sitelerde yayımlanan yazılarda, haberlerde bazı kelime veya resimlere scriptler uygulanarak reklam ve açıklamalar getiren baloncukların (tooltip) ajax, css, javascript kullanarak nasıl yapıldıklarını anlatan ve birçok siteden derlenen bu liste bayağı uzun. istenilen kelimeye veya resme html dosyasıyla yapılan bu uygulamalardan bir kısmını açıklamaya çalışayım.
1) örnek sayfa, küçük bir javascript dosyası, görünüm için css kodları ve script’te kullanılan baloncuk resmini barındıran bu dosya ile aşağıdakine benzer görünümler oluşturabilirsiniz.script açıklama demo
