Javascript ile “title” özelliğini geliştirmek

Yazan: gokhanweb | Tarih 27 Mayıs 2008 | Yorum  5 Yorum
BerbatKötüOrtaGüzelHarika 1 kez puan verildi, Ortalama: 5 (5 üzerinden)
Loading ... Loading ...

Merhaba arkadaşlar, bu yazımda javascript ile html nesnelerinde kullanıdığımız title özelliğini geliştirip daha güzel görünen yeni bir bilgi gösterici yapacağız. Aslında title özelliğini geliştirmiyoruz, tamamen yok edip kendi oluşturduğumuz yeni nesneyi gösteriyoruz. Benim yapmış olduğum bu uygulamanın benzerlerini bir çok web sayfasında bulabilirsiniz. Benim böyle bir uygulama yazmamdaki asıl amacım yazdığım javascript kodlarının açıklamalarımla daha iyi anlaşılması.

Öncelikle javascript dosyamızın kodlarını yazacağım ve kod satırlarını anlatacağım.

Biliyorsunuz title kelimesi ingilizcede başlık anlamına geliyor. Ama kendi dilimize çevirdiğimizde kullanılma şekline göre başlık kelimesinden daha anlamlı bulduğum bilgi göstergeci kelimesini kullanacağım.

Uygulamanın çalışma yöntemi belki bir çok javascript programcısının kullandığı yöntemden farklı olabilir ancak dediğim gibi amacım kodlamamda kullandığım fonksiyonları tanıtmak veya öğretmek.

İlk önce sayfamızda bulunan hangi elementlerin görsel bilgi göstergecine sahip olacağını belirleyen kodlarımızı yazıyorum. Bu kodlar değiştirilebilir.

PLAIN TEXT
JavaScript:
  1. var idler = ["perfectgate","baskabir_id"];
  2. var siniflar = ["link","baskabir_class"];

Daha sonra uygulamamızın kullanacağı bilgi göstergecini ve özelliklerini taşıyacak javascript nesnemizi yaratıyorum.

PLAIN TEXT
JavaScript:
  1. var bilgi =  new Object;
  2. bilgi.aktifNesne = null;
  3. bilgi.pencere = null;
  4. bilgi.mesaj = null;

Dizilerimizi ve değişkenlerimizi yarattıktan sonra sayfamızın yüklenmesiyle çalıştırılacak fonksiyonları yazıyorum.

PLAIN TEXT
JavaScript:
  1. document.onload = bilgiBaslat();
  2.  
  3. function bilgiBaslat() {
  4. document.onmouseover = bilgiGoster;
  5. document.onmouseout = bilgiYoket;
  6. }

Yukarıda sayfamız üzerindeki elemanların mouseover ve mouseout olaylarında çalıştırılacak fonksiyonları belirledim. Şimdi sırayla bu fonksiyonları anlatayım.

bilgiGoster fonksiyonu bilgi göstergecine sahip olacak nesnemizin title özelliğindeki yazıyı alıyor ve yukarıda belirlediğimiz bilgi adındaki javascript nesnesinin mesaj özelliğine atıyor. Daha ayrıntılı bi şekilde şöyle anlatabilirim;

Aktif nesnemizi alıyor ve bu nesnemizin scriptin en üstünde belirlediğimiz id'lerden birine veya belirlediğimiz sınıflardan birine dahil olup olmadığına bakıyor. Eğer biz fareyi üzerinde gezdirdiğimiz aktif nesnemizin bilgi göstergecine sahip olmasını istemişsek bilgiPenceresi fonksiyonu çalıştırılıyor. Şimdi bu anlattıklarımı yapan bilgiGoster fonksiyonunun kodlarını yazayım:

PLAIN TEXT
JavaScript:
  1. function bilgiGoster(o) {
  2. if(!o){o=window.event;}
  3. nesne = document.all?o.srcElement:o.target;
  4. if(in_array(nesne.id,idler) || in_array(nesne.className,siniflar)) {
  5. bilgiPenceresi(o);
  6. bilgi.aktifNesne = nesne;
  7. bilgi.mesaj = nesne.title;
  8. nesne.title = "";
  9. nesne.style.cursor = "help";
  10. if(document.all) {
  11. nesne.attachEvent("onmousemove",bilgiPenceresi);
  12. } else {
  13. nesne.addEventListener("mousemove",bilgiPenceresi,false);
  14. }
  15. }
  16. }

Yukarıdaki fonksiyon içerisinde çalıştırılan bilgiPenceresi fonksiyonu ise şu işlemleri yapıyor:

Bilgi göstergecimizin kullandığı div elementinin daha önce oluşturulup oluşturulmadığna bakıyor. Eğer oluşturulmamışsa document nesnesine bağlı createElement methodunu çalıştırarak yeni bir div oluşturuyor. Bu div'i document.body.appendChild() ile sayfamızın ana elementi olan yada sayfamızın bizim gördüğüm kısmı olan body (gövde) ' ye bir çocuk elementi olarak ekliyor. Daha sonra bu div'in css (style sheet) sınıfı belirleniyor. (Ben burda yardim adında bir sınıf olduğunu varsayarak kodları yazdım. Siz sitil dosyanızda yardim adında bir sınıf oluşturup bilgi göstergecinin sitilini ayarlayabilirsiniz.)

Eğer bilgi göstergecimizin kullandığı div zaten yaratılmışsa yukarıda anlattıklarım yapılmadan doğrudan göstergecin göstereceği yazılar innerHTML kullanılarak göstergecin içine aktarılıyor. clientX ve clientY kullanılarak farenin konumu alınıyor ve bilgi göstergecinin konumu belirlenerek göstergecin hareket etmesi sağlanıyor. Bu arada göstergecin hareket ettirilebilmesi için sitilindeki position değeri "absolute" olarak ayarlanmalıdır.

Şimdi işlevlerini anlattığım bilgiPenceresi fonksiyonunu yazayım:

PLAIN TEXT
JavaScript:
  1. function bilgiPenceresi(o) {
  2. if(!o){o=window.event;}
  3. nesne = document.all?o.srcElement:o.target;
  4. if(bilgi.pencere==null) {
  5. bilgi.pencere = document.createElement("div");
  6. document.body.appendChild(bilgi.pencere);
  7. bilgi.pencere.className = "yardim";
  8. }
  9. bilgi.pencere.innerHTML = bilgi.mesaj;
  10. with(bilgi.pencere.style) {
  11. left = o.clientX+"px";
  12. top = o.clientY+"px";
  13. position = "absolute";
  14. }
  15. }

Bu noktaya kadar bilgi göstergecimizin yaratılması, içeriğinin gösterilmesi ve göstergecin taşınması işlemlerini hallettik. Şimdi mouseout'a bağlanmış bilgiYoket fonksiyonunu göstereceğim. Bu fonksiyon sayfadaki herhangi bir elementin üzerinden fare kaldırılmışsa (yani onmoseover) çalıştırılan bir fonksiyon. Bu fonksiyon üzerinden farenin kaldırıldığı elementin bilgi göstergecine dahil edilmiş ve o an kullanılan bir element olup olmadığına bakıyor. Eğer biz bu elementi scriptimizin en üst kısmında bilgi göstergeci kullanacak bir şekilde (id'sine göre veya css sınıfına göre) belirlemişsek o an gösterilen bilgi göstergecini yok ediyor. Şimdi bilgiYoket fonksiyonumuzu görelim.

PLAIN TEXT
JavaScript:
  1. function bilgiYoket() {
  2. if(bilgi.aktifNesne!=null) {
  3. pencere = bilgi.pencere;
  4. bilgi.pencere = null;
  5. pencere.parentNode.removeChild(pencere);
  6. bilgi.aktifNesne.title = bilgi.mesaj;
  7. bilgi.aktifNesne=null;
  8. }
  9. }

Yukarıdaki fonksiyonlarda kullandığım in_array fonksiyonunu görelim. in_array fonksiyonu ilk girilen argümanın ikinci girilen dizi (array) tipindeki argümanın içerisinde var olup olmadığına bakıyor ve eğer var ise true dönderiyor.

PLAIN TEXT
JavaScript:
  1. function in_array(ne,nerde) {
  2. for(i=0;i<nerde.length;i++) {
  3. if(ne==nerde[i]) return true;
  4. }
  5. return false;
  6. }

Javascript ile bilgi göstergeci uygulamamız tamamlanmış oldu. Şimdi bu bilgi göstergecini kullanabileceğimiz örnek bir html sayfası ve sitil dosyası oluşturacağım.

html sayfamızın kodları:

<html>
<head>
<title>JS ile Bilgi Göstergeci</title>
<script type="text/javascript" src="yardim.js"></script>
<link rel="stylesheet" type="text/css" href="yardim.css" />
</head>
<body>
<a href="#" class="link" title="Göster <b>Linkinin</b> Açıklaması" id="goster">Göster</a><br /><br />

<img src="http://www.perfectgate.net/wp-content/themes/pg/images/logo.jpg" title="Bir <span style='color:#c00'>çift tıklama</span> kadar yakın" id="perfectgate" class="link" />
</body>
</html>

Sitil dosyamız (yardim.css) :

PLAIN TEXT
CSS:
  1. .yardim {
  2. padding:6px;
  3. border:1px solid #999;
  4. background-color:#fff;
  5. font-size:11px;
  6. font-family:Tahoma;
  7. margin:20px 0 0 20px;
  8. opacity:0.8;
  9. filter:alpha(opacity=80);
  10. }

Yaptığımız scriptimizin dosyaları aşağıdadır:

yardim.js

yardim.html

yardim.css

Yaptığımız uygulamayı test etmek için buraya tıklayın.

Yazdır Yazdır | 751 Görüntülenme | Kategori: HTML & Javascript & Ajax | Trackback  Geri İzleme
Etiketler  Etiketler: , , , , ,

Benzer Yazılar

  • Benzer bir yazı bulunamadı.


Yorum Yap


(gerekli)

(gerekli,yayınlanmaz)




XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>