Sadece birkaç satır jQuery kullanarak istediğiniz bir metnin üzerine fare imlecini getirdiğinizde onun rengini değiştirmek çok kolay bir işlem. Nasıl mı? Yazının devamını okuyun.

Demo | Ä°ndir

Prensip
Bu betiÄŸin yaptığı ÅŸey, baÄŸlantıları (A Etiketikleri) seçmek, içeriÄŸini “.one” adındaki bir sınıfa dahil olan SPAN’a dahil etmek ve “.two” adında bir SPAN elementi oluÅŸturmak. SPAN “iki” A etiketi ile aynı içeriÄŸi taşıyor ve baÄŸlantı metninin hemen üzerine konumlandırılmış.

BaÅŸlangıçta ikinci SPAN gizli. A elementinin üzerine fare imleci getirildiÄŸinde, “two” SPAN elementi jQuery’nin fadeTo

Her zaman olduğu gibi IE yine problem çıkarıyor ve bu sebeple bunu çözecek bir yöntem uygulamak zorunda kaldık. Çünkü bir metin IE üzerinde yavaşça belirginleşirken IE o metnin görünümünü çirkinleştiriyor, bu sebeple de ilgili elemente bir arkaplan rengi uygulamamız gerekiyor.

Betiği sitenize nasıl ekleyeceksiniz?

Adım 1 - JavaScript

Yukarıda verdiÄŸim baÄŸlantı üzerinden betiÄŸimi ve jQuery kütüphanesini içerek betiÄŸi indirin ve sitenizde bir yere yarlaÅŸtırın. Ben genellikle tüm JavaScript dosyalarını ana dizindeki “/js” klasörü içerisine yerleÅŸtiririm. Ardından aÅŸağıdaki kodu kullanarak jquery kütüphanesini ve renk geçiÅŸ betiÄŸini içeren js dosyasını ekleyin.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fadeLinks.js"></script>

Adım 2 - CSS
Aşağıdaki satırları CSS dosyanızın içerisine ekleyin. Bu bir demo olduğu için ben etiket seçicilerini kullandım. A için kullandığım stil öntanımlı olarak kullanılırken, SPAN için kullandığım stil fare imleci metnin üzerine getirildiğinde beliriyor.

a{
    color:#f30;
    font-weight:bold;
    text-decoration:none;
    }
a span.two{
    color:#069;
    cursor:pointer;
    }

Adım 3 - Özelleştirmeler
CSS seçicilerinizin düzgün yazıldığına emin olun ki bu betiÄŸi seçici olarak ekleyebilirsiniz. Yoksa bu stil belgenizdeki tüm A etiketlerine uygulanır. Seçicileri özelleÅŸtirmek CSS üzerinden ve betik üzerinden de yapılmalı. ÖrneÄŸin eÄŸer bu efekti id=”content” kullanan bir div’e uygulamak istediÄŸinizi varsayarak, kullanmanız gereken kod aÅŸağıdaki gibi olmalı.

#content a{
    color:#f30;
    font-weight:bold;
    text-decoration:none;
    }
#content a span.two{
    color:#069;
    cursor:pointer;
    }

fadeLinks.js dosyanızda da selector adındaki değişken de şu şekilde görüntülenmeli.

var selector = "#content a";

EÄŸer geçiÅŸ efektinin hızı yavaÅŸsa o zaman “speed” deÄŸiÅŸkeninin deÄŸerini deÄŸiÅŸtirebilirsiniz. YavaÅŸ için “hızlı”, normal için “normal”, hızlı için “fast” deÄŸerini kullanın.

Betik, Windows’ta FF, IE7 ve Opera üzerinde, Mac’te FF ve Safari üzerinde denendi.

Demo | Ä°ndir

Kaynak: CSS Globe

Belki tam bir jQuery uzmanısınız. Ya ne olacak canım, John Resig’in tam kendisisiniz belki de… Ya da Bildirgeç üzerinde “Prototip”, “jQuery“, ve “Mootools” gibi kelimeleri görüp “Bunlar da ne ola ki?” diye hayıflanıp duruyorsunuz… Åžimdi tüm bunları öğrenmenin zamanı geldi.

Bu endüstride, -özellikle günümüzde daha önce hiç olmadığı kadar-, tasarımcılar kodculara, kodcular da tasarımcılara dönüşüyor… Bir geliÅŸtiricinin görevi SADECE ön ya da arkaplan iÅŸlerini yürüten kod yazmak olmaktan çıkıyor. jQuery iÅŸte bu aradaki mesafeyi kapatmaya yardımcı olan bir JavaScript kütüphanesi. JavaScript eriÅŸilemez bir yetenek deÄŸil. Daha önce yayımladığım size sıfırdan PHP öğretecek 25 kaynak yazısının site kullanıcıları tarafından çok tutulan bir yazı olduÄŸunu gördükten sonra nettuts üzerindeki benzer bir yazıyı da jQuery dersleri için yayımlamayı uygun gördüm. Bu makalede daha önce hiç jQuery üzerinde çalışmamış geliÅŸtiricilere jQery kütüphanesini öğrenmelerine olanak saÄŸlayacak 15 kaynağı listeleyecek ve ilgili kaynaklar hakkında bilgi vereceÄŸim. EÄŸer bugüne kadar bu kütüphaneye herhangi bir nedenden ötürü korkup yaklaÅŸmamışsanız, ÅŸimdi ona yaklaÅŸmanın tam zamanı. Ne kadar kolay olduÄŸuna inanamayacaksınız.

jQuery de ne ola ki?
jQuery.com’a göre jQuery hızlı ve öz bir JavaScript kütüphanesi olup HTML belgelerinizi olayları iÅŸleyebilecek, animasyonlar yürütebilecek ve web sayfalarınıza Ajax etkileÅŸimleri dahil edebilmenizi kolaylaÅŸtırır. jQuery, bugüne kadar JavaScript yazma ÅŸeklinizi geliÅŸtirmek için tasarlanmıştır.

Daha basit anlamı ile jQuery, daha önce 10 satır yazdığınız JavaScript kodunu iki satırda yazmanıza olanak saÄŸlayan bir kütüphane! Geriye kalan sekiz satırın en verimli ÅŸekilde baÅŸkaları tarafından halihazırda yazıldığını ve bu kodun da JavaScript çalıştırabilen tüm modern tarayıcılarda yürütülebildiÄŸini düşünün. Daha jQuery’i derinlemesine öğrenmeden bile zengin formlardan Flash gibi menüler oluÅŸturabileceksiniz. Bir baÅŸka iskeleti daha öğrenmek istemiyorum demeyin. AÅŸağıdaki kaynaklar size bu yolda adım adım rehberlik edeceklerdir.

Neden diğerlerini değil de bu kütüphaneyi kullanmalıyım?
Sonuç olarak bu sizin seçimiz. Her bir iskeletin (framework) kendine özgü avantajları vardır. Ancak jQuery’nin günümüzün en popüler JavaScript iskeleti olmasının ardında bazı nedenler yatıyor.

Birden fazla tarayıcı ile uyum. Her bir JavaScript ikmali sırasında web geliştiricilerinin önemli bir zamanını, geliştirdikleri betiğin farklı tarayıcılar üzerinde beklendiği gibi çalışıp çalışmadığını test etmesi beklenir. Ne şans ki jQuery kütüphanesi bu tarayıcı uyumsuzluklarını gideriyor ve geliştiricilere kendi kodları üzerinde daha fazla zaman harcayabilmelerine olanak sağlıyor.

CSS Seçicileri. CSS sözdizimlerini kullanarak, geliştiriciler halihazırda kullandıkları bilgilerini belgelerine kolayca dahil edebilirler. CSS 3 ve XPATH seçicilerinin de desteği ile, jQuery sayfanızdaki elementleri kullanmak için mükkemel bir mekanizma sunuyor.

Zincirleme. jQuery kendi metodları için “zincirleme” (chaining) adı verilen bir yöntem kullanır. Bir jQuery nesnesi üzerinde bu yöntemi çalıştırdığınız her zaman, ilgili yöntem aynı jQuery elementini çalıştırır. Bu nedenle de her bir yöntem için seçicilerinizi yeniden yazmanız gerekmez. Tıpkı “.NET” tarzındaki bir özelliÄŸi kullanarak daha küçük dosya boyutlarına sahip ve kolay okunabilen kodlar yazabilmenizi saÄŸlar.

Eğer merakınız iyice arttıysa, çok güzel! Hemen başlayalım.

Adım 1: Kütüphaneyi İndirin
Bu yolculuktaki ilk durağınız kütüphaneyi bilgisayarınıza indirmek olacaktır. jQuery.com‘u ziyaret edin ve “Download jQuery” bölümüne gidin. Listedeki baÄŸlantılardan birine tıklayarak kütüphaneyi bilgisayarınıza indirin. Daha sonra indirdiÄŸiniz .js dosyasını HTML belgenize dahil etmeniz gerekecek.

• CSS-Tricks.com: jQuery’e GiriÅŸ: Bu jQuery eÄŸitim videosunda, CSS-Tricks websitesinden Chris Coyier, jQuery’i web sayfanıza nasıl dahil edebileceÄŸinizi ve birkaç özelliÄŸi nasıl yazabileceÄŸinizi gösterecek.
• Digital-Web.com: jQuery: BaÅŸlangıç Kursu: Kod yazmayı bilen web tasarımcıları için jQuery’e giriÅŸ kursu.
• Slideshare.net: “30 Dakikada jQuery Öğrenmek”: EÄŸer slayt gösterilerinden hoÅŸlanıyorsanız, bu ders size jQuery kullanarak nasıl slayt gösterileri oluÅŸturabileceÄŸinizi ve aynı zamanda size jQuery öğretmeyi hedefliyor.

Adım 2: İlk Fonksiyonunuzu Oluşturun
jQuery’i öğrenme aÅŸamanızın daha ilk birkaç dakikasında kendi fonksiyonlarınızı oluÅŸturmaya baÅŸlayacaksınız. Ä°lk durağınız John Resig’in giriÅŸ maklesi “jQuery Nasıl Çalışır?” olmalı. Resig, web uygulamalarınız üzerinde kullanacağız pek çok kolay anlaşılır yöntemi anlatacak. Anlatacakları arasında sınıf ekleme ve kaldırma, zincirleme ve “document.ready” yöntemini çağırmak yer alıyor.

• jQuery.com: “jQuery Nasıl Çalışır?”: Bu giriÅŸ makalesinde John Resig (jQuery’nin yaratıcısı) sizi animasyon oluÅŸturmanın temellerine götürecek. EÄŸer jQuery’e yeniyseniz bu makaleyi kesinlikle okumanız önerilir.
• 15DaysOfJquery.com: 1. Gün: jQuery’nin tüm özelliklerini iki haftada kavramak gibi cesur bir giriÅŸimde bulunan “15 Days of jQuery” (jQuery ile 15 Gün) web sitesi her gün bir konuyu iÅŸliyor. Bu makalede “document.ready” yöntemini nasıl kullanmanız gerektiÄŸini öğreneceksiniz.
• VisualJquery.com: “jQuery Sözlüğünüz”: VisualjQuery.com web sitenizi dijital sözlüğünüz olarak düşünün. Site, kullanılabilen her bir jQuery yönteminin sözdizimini ve açıklamasını içeriyor. Bu siteyi yer imlerinize eklemeyi unutmayın.

Adım 3: Elementlerinizi Canlandırın

Bu pek çok geliÅŸtirici için tartışmalı bir konudur. Birinci grupta “sıfır animasyon”da ısrar eden insanlar bulunur. Bunlar kullanıcının istediklerine mümkün olan en hızlı ÅŸekilde cevap verilmesine ve aradan çekilmesini tercih ederler. Onlara, bir sonraki uÄŸraşı için bekleyen bir zombi gibi davranmayın. Ä°kinci grupta da bazı insanlar vardır. Onlar, göze hoÅŸ görünen animasyonlar içeren bir siteye, kendi kullanıcıları için uygun bir site gibi bakarlar. Bu animasyonlar uygun kullanıldığında animasyonların kullanılırlığı önemli ölçüde arttırdığına inanırlar. Siz, hangi grupta olduÄŸunuza karar vermelisiniz. Hangi grupta olursanız olun jQuery’nin sayfanızdaki elementleri hareket ettirebilme görevini mümkün olan en kolay ÅŸekilde yerine getirebildiÄŸini unutmayın.

• jQuery.com: “Animasyonlar jQuery’nin animasyon yeteneklerini öğrenirken burası uÄŸramanız gereken ilk yer olmalı. Makale, bu yöntemi kullanırken ihtiyacınız olacak parametreleri detaylandırıyor.
• Detached Designs: jQuery’nin Animasyon Yeteneklerini Öğrenmek: Konu animasyona geldiÄŸinde hiç deneyiminiz yok mu? Bu makale özellikle animasyon konusunda hiç deneyimi olmayan kullanıcıları hedef alıyor. Makalenin içerdeÄŸi baÅŸlıklar arasında metin boyutunu deÄŸiÅŸtirmek, elementleri hareket ettirmek, animasyonları zincirlemek gibi her jQuery kullanan geliÅŸtiricilerin iÅŸine yarayacak konuları içeriyor.
• Web Designer Wall: Tasarımcılar İçin jQuery Dersleri: Halen jQuery’nin gücü kafanızı mı karıştıryor? Bu site menülerden imaj deÄŸiÅŸtirmeye kadar 10 adet örneÄŸi detaylandırarak bu muhteÅŸem kütüphanenin yetenekleri hakkında sizi bilgilendirmeyi hedefliyor.

Adım 4: Eklentiler
jQuery ile ilgili güzel olan bir şey var ki o da kütüphane geliştirilirken, John Resig ve ekibi kütüphanenin özelliklerini eklentiler kullanarak geliştirmenin sadece birkaç satır kod ekleyerek mümkün kılmak üzerine çalışmış olmaları. Kendinize özgü yöntemleri çok kısa süre içerisinde yazabileceksiniz! Bu eklentileri ana kütüphaneden ayrı tutarak (bu arada jQuery kütüphanesinin sadece 16KB olduğunu da hatırlatalım), bu özel eklentileri sadece gerektiği zaman sayfalarımıza dahil edebileceğiz. Bunun sonucunda JavaScript dosyalarınızın boyutu mümkün olan en küçük seviyede kalacaktır.

• jQuery Corner Gallery
  Elementlerinize yuvarlatılmış köşeler eklemek için CSS3′ün tüm tarayıcılar tarafından desteklenmesini beklemek istemiyor musunuz? O zaman jQuery kullanarak elementlerinize kolayca yuvarlatılmış köşeler ekleyebilirsiniz. Sadece yuvarlatılmış köşeler ile de sınırlı kalmayın, zira eklenti çeÅŸit çeÅŸit köşe tiplerini de bünyesinde barındırıyor. Bu eklenti araç kutunuzda kalıcı bir yer bulabilir.
• Kullanıcı Deneyimini GeliÅŸtirin: 10 Kullanışlı jQuery Eklentisi Bu makalede James Padolsey, kendince en iyi jQuery eklentilerini listelemiÅŸ.
• jQuery.com: “Eklentiler”: Her zaman olduÄŸu gibi jQuery.com deÄŸerli bir kaynak olmaya devam ediyor. Bu makale ilk eklentinizi oluÅŸturmak için size adım adım rehberlik ediyor.

Adım 5: AJAX Özelliğini Dahil Etmek
Åžu ana kadar öğrendiÄŸiniz jQuery yetenekleri ile kendinizi güvende mi hissediyorsunuz? Yeteneklerinizi bir sonraki seviyeye yükseltmeye hazır mısınız? Neden betiklerinize biraz Ajax özelliÄŸi dahil ederek baÅŸlamıyorsunuz? Her ne kadar “load()” ve “.get()” yöntemlerinin kullanımı ile jQuery veri yüklemeyi inanılmaz derecede kolaylaÅŸtırıyor. AÅŸağıdaki kaynaklar eÄŸitiminiz için hayati önem taşıyor.

• Sitepoint.com: jQyery ile Kolay AJAX: Akash Mehta’nın Sitepoint için hazırladığı bu makalede web uygulamalarınıza AJAX eklemenin jQuery kullanılarak ne kadar da basit bir iÅŸlem olduÄŸu anlatılıyor.
• Tasarımcılar için jQuery: AJAX Kullanarak Form DoÄŸrulama: Bu makalenin yazarı Remy, bizlere jQuery kütüphanesinin yanında AJAX kullanarak bizlere, web tabanlı formlara nasıl sunucu taraflı doÄŸrulama özelliÄŸini ekleyebileceÄŸimizi gösteriyor.
• Nettuts.com: jQuery Kullanarak İçerik Nasıl Yüklenilir ve Hareket Ettirilir?: jQuery dersleri ararken NETTUT’un “Javascript” kategorisine bir gözatmayı unutmayın. Bu derste NETTUTS ekibi jQuery kullanılarak bir verinin nasıl yüklenebileceÄŸini ve ardından onu taşıyan elementin nasıl hareket ettirilebileceÄŸini göstermiÅŸ.

Vanderbilt Universitesi psikologlarının yaptığı araştırmalara göre müzisyenlerin müzik eğitimi almamış insanlara göre ışınsal düşünme becerilerini çok daha iyi kullandıkları ve beyinlerinin her iki yarım küresinin ön korteks bölümlerinin dengeli bir şekilde beraber çalıştığı gözlemlenmiş. Bu da doğal olarak algılama ve yaratıcı düşünme kabiliyetlerinin gelişmelerini sağlamış.

Bir müzisyen gördüğü notaları beyninde düşünüp, düşündüğü şeyleri ellerini hatta bazen ayaklarını kullanarak uygulamaktadır. Bu da beyinlerinin her iki yarım küresini nasıl aynı anda ve ne derece dengeli kullandığını açıklıyor. Folley’in yaptığı bu araştırma, müzisyenlerin beyinlerindeki bu dengeli çalışmanın düşünme tarzında da niteliksel farklar oluşturduğunu ortaya çıkarmıştır.

Vanderbilt Blair Müzik Okulu’ndan en az sekiz yıllık müzik eğitimi almış 20 klasik müzik öğrencisi ile Vanderbilt’den müzikle ilgisi olmayan 20 psikoloji öğrencisi üzerinde yapılan araştırmaya göre müzikle uğraşan kesimin sözel yeteneklerinin daha gelişmiş olduğu, daha fonksiyonel düşünebildikleri ve bilgiye karşı yaklaşımlarının daha farklı olduğu gözlemlenmiştir. Elbette ki araştırmaya katılan öğrencilerin yaş, cinsiyet, eğitim durumları da karşılaştırılmıştır.

Peki algılama yeteneğimizi geliştirmek için uzmanlar hangi müzik türünü dinlememizi öneriyor?
Uzmanlar Mozart gibi klasik müzik bestecilerinin eserlerinin sakin bir ortamda günde en az bir kere dinlenmesi gerektiğini düşünüyorlar. Bu yöntemle beynin ışınsal düşünme becerisinin yani yaratıcılık ve algılama unsurlarının artacağını, özellikle ‘zihinde imaj canlandırmak’ konusunda çok daha başarılı olabileceğimizi söylüyorlar. Bu düşünceye göre satrançta, müzik enstrümanları çalmakta ve hatta matematik problemlerini çözmekte bile usta olunabiliyor. Kalifornia Üniversitesi araştırmacılarının Mozart Etkisi olarak nitelendirdiği bu durum, zekasını yoğun kullanmak isteyenlere klasik müziği şiddetle tavsiye ediyor.
Müziksiz yaşam bir hatadır. (F. Nietzsche)

Bu makalede sadece CSS kullanılarak oluşturulmuş bir ilerleme çubuğunun nasıl oluşturulabileceğini anlatmaya çalışacağım. Aslında hile çok basit. İhtiyacımız olanlar 3 element, bir kapsayıcı (container) ve 2 içiçe geçmiş element.

demo | indir

Konsept
Kapsayıcının arkaplanına güzel görünümlü bir resim yerleştirip kapsayıcının sabit yüksekliğini ve genişliğini belirteceğiz. İlk astımız (SPAN) ilerleme çubuğu görevini üstlenecek. İkinci astımızı (EM) ise ilerleme çubuğunun üzerine mutlak (absolute) konumlandıracağız ve onu sola doğru kaydırarak istediğimiz seviyeye çekeceğiz. EM, kapsayıcı ile aynı arkaplana sahip, bu sayede ilerleme çubuğunun bir süre sonra durduğu izlenimini vermiş olacağız.

Biçimlendirme

Kodu mümkün olduğu kadar anlamlı tutabilmek için bazı değerlerde tanımlama listesi (Definition List - DL) kullandım. Tek bir ilerleme çubuğu için istediğiniz elementi kullanabilrsiniz. Ben paragrafları sevdiğim için örneğimde P kullandım.

<dd>
    <span><em style="left:100px">50%</em></span>
</dd>

Sol EM konumlandırması için satıriçi stil kullandım. Her iki değeri de aynı yere bir kerede yazmak daha elverişli.

Animasyon
Peki bu nasıl oluyor? Elbette animasyonlu gif imajı kullanarak. Onları hatırlıyorsunuz deÄŸil mi? SPAN elementinin 200px geniÅŸliÄŸinde arkaplan imajı var ve bu imaj “sıfır”dan 200px’e kadar animasyon içeriyor. Hangi yüzdeyi kullanırsak kullanalım, imaj 200px’in sonuna kadar gidiyor ve sonra duruyor. Durma efekti ise daha önce bahsettiÄŸim EM ile yapılıyor.

EM Konumlandırması

ÖrneÄŸimde 200px geniÅŸliÄŸinde ilerleme çubuÄŸu kullandım. EM elementinin geniÅŸliÄŸi de 200px. Buradan her bir yüzdenin 2px geniÅŸliÄŸinde olduÄŸu anlamını çıkarmışsınızdır. EÄŸer EM’i doÄŸru olarak itelemek istiyorsanız o zaman yüzde deÄŸerinizi 2 ile çarpmanız gerek. ÖrneÄŸin %50′nin anlamı 100px geniÅŸliÄŸinde, %24′ün anlamı 48px geniÅŸliÄŸinde, %75′in anlamı 150px geniÅŸliÄŸinde olacak… Buradan ne demek istediÄŸimi anlamışsınızdır.

demo | indir

Kaynak: CSS Globe

Okulu bitirmiş veya bitimek üzere olan bütün gençlerin ortak noktası kpss sınavı.
Kpss.sinavi.biz adresinde yapılan anketler gençlerin ne düşündüğünü bize gösteriyor.
Buna göre gençlere sorulan sorular ve sonuçlar şöyle
Ne Yapıyorsunuz?
Ankete katılan 1737 kişiden 696sı işsiz,634ü öğrenci,311 özel bir kurumda çalışıyor.
Yaşınız?
Ankete 1518 kişi katıldı,yaşlar 20 ve 30 arasında düzenli dağılıyor.
KPSS’den Kaç Puan Aldınız?
Katılım 9863 kişi,en çok 60 ve altı puan alınmış.
KPSS’de En Çok Zorlandığınız Ders?
En zor matematik,sonra tarih geliyor.
Yılın Olayı
Ergenekon davasını,israil saldırısı ve ekonomik kriz.
Anketlerin yanında kpss için gerekli bilgileride sitede bulabilirsiniz.

kpss sınav tarihi
kpss sonuçları

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.

3 ipucunu bir arada indirin

Ö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

3 ipucunu bir arada indirin

Kaynak: CSS Globe