MouseOver ToolTip

eren_keskin
07-11-2011, 18:04   |  #1  
OP Yeni Üye
Teşekkür Sayısı: 0
23 mesaj
Kayıt Tarihi:Kayıt: Şub 2011

Evet Arkadaşlar Başlıkta da belirttiğim gibi Sizlere MouseHover ToolTip + Usluer Manşet yani Bir Yazının veya resimin üzerine geldiğimizde yanında çıkan baloncukta yazı yazdırmayı ve İsmail Usluer'in blogunda paylaştığı manşet sliderı kurup kullanmayı size videolu olarak anlatacağım.Ve Bu Anlatımı Bayramın Sonuna Kadar yapmaya çalışacağım.Şimdiden Hepinize İyi Bayramlar..


(Not: Videolar Bu Paylaşımın Altında ve Kişisel Blogumda Yer Alacaktır.Takipte Kalın.)

Evet Sizlere Bahsettiğim MouseHover ToolTip'i Anlattım.Şimdi Başlayalım.

ToolTip nedir?

Tooltip web sitelerinde kelime,resim veya yazı alanlarının üzerine mouse’umuzu getirdiğimizde çıkan küçük bilgi baloncuklarıdır.Tooltip bizlere daha farklı ve göze hoş gelen bilgilendirme baloncukları oluşturmamızı sağlar ve kullanıcıların gözüne daha hoş gelen açıklama kısımları oluşturmamız için kolaylık sağlar.

Bu jQuery Uygulumasının internette birçok örneği mevcut.En Basitinden 1stwebdesigner.com‘da 30 adet ToolTip Örneği var.Bunların İstediklerinize bakabilir hatta Birazdan anlatacağım işlemi daha değişik şekillerde uygulayarak benzerlerini yapabilirsiniz.

Yapacağımız ToolTip’in demosunu Sitemin “Arama Kısmı“nın üzerine gelerek Görebilirsiniz.İsterseniz Kısa Keserek Hemen Anlatıma Geçeyim.

ToolTip Gösterimi

Öncelikle Yapmamız Gerek Bu Adresten indirdiğimiz .js dosyasını sitemizin “js” klasörüne atmak olacaktır.(Eğer js Klasörünüz Yoksa Bunu <head></head> tagları arasında belirttiğiniz yola atınız.)Header.php dosyasında bu .js dosyamızın yolunu belirtiyoruz.Ardından Bu ToolTip’in görünmesini istediğiniz yere

[ Tüm kodu seç ] [ Yeni Pencerede Göster ]
class="BELİRTECEĞİNİZ BİR SINIF" onmouseover="tooltip.show('GÖRÜNMESİ GEREKEN YAZI');" onmouseout="tooltip.hide();"
Yazıyoruz (Büyük harfli yerleri kendimize göre düzenliyoruz.) ve hepsi bu kadar.Şimdi geriye kalan tek şey bu “ToolTip”i CSS ile düzenleme.Ben sizler için ufak bir CSS dosyası yaptım ve bunuda sizlere sunayım.
[ Tüm kodu seç ] [ Yeni Pencerede Göster ]
/* Baloncuk */ .DOSYAYA VERDİĞİNİZ SINIF {color: #666666; font-weight:bold; padding-bottom: 1px; cursor: pointer;} #tt {position: absolute; display: block; background-color: #9c0909; font-size: 12px; font-family: Verdana; line-height: 18px; -moz-border-radius: 5px; -webkit-border-radius:5px;} #tttop{display: block; height: 5px; background-color: #9c0909; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius:5px;} #ttcont {display: block; padding: 0px 8px; color: #fff; background-color: #9c0909; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius:5px;} #ttbot{display: block; height: 5px; background-color: #9c0909; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius:5px;}
Ve Sitemizde Bizimde Artık Bir ToolTip’imiz var.Sizde Bu işlemleri uygulayarak kendinize çok değişik tooltipler yapabilirsiniz.Bu İşlemi Yapmakta Zorlananlar İçin size Birde videolu olarak anlattım,yapacaklarımız videoyu izlediğimizde kafamızda daha da netleşecektir.(Not: 720p Kalitesinde İzleyiniz.)

Videoyu İzlemek İçin Tıklayınız.

Kaynak: http://www.erenkeskin.com/tooltip-nedir-nasil-gosterilir/