mehmetduran.com - Paylaşmak Güzeldir...
Javascript ile Linkleri Renklendirme
İnternet sitelerine canlılık kazandırmak ve görselliği artırmak için onmouseover ve onmouseout olayı sık sık kullanılır. Bu olayı css ve javascript ile yapabiliyoruz. Ancak css ile yaptığımızda (hover olayı) tüm tarayıcılar bunu desteklemiyor. Javascript ile yaparsak çoğu tarayıcı destekliyor. Şimdi bu olayı nasıl yapacağımıza bakalım.
Öncelikle bu olayı javascript ile yazacağımız bir fonksiyonla yapacağız ve tüm linklerde bu fonksiyonu kullanacağız. Kodlarımız şöyle;
javascript_link_renklendir_kodlar Bu fonksiyon ile renklendireceğimiz alanı kontrol parametresi ile belirtiyoruz. backcolor ve textcolor ise onmouseover ve onmouseout olayında kontrolün arkaplan rengini ve yazı rengini belirtiyoruz.


Şimdi ise bu fonksiyonumuzu html tarafında nasıl kullanacağımıza bakalım.

javascript_ile_linkleri_renklendirme_ornek

Oluşan görüntü ise;
javascript_ile_linkleri_renklendirme
Gördüğünüz gibi onmouseover ve onmouseout olayında fonksiyonumuz çağırıyoruz ve parametrelere değerleri veriyoruz. İlk parametremiz hangi kontrolü renklendireceğimizi belirtiyor. Bu değeri `this` olarak giriyoruz ve o kontrolün üzerine geldiğimizde ve üzerinden ayrıldığımızda alacağı renkleri belirtiyoruz. Ayrıca bu değere her kontrole bir id verip bu idleri yazarakta kullanabilirdik. Ancak o zaman kodlarımız biraz uzayacaktı. En kısa ve bence en performanslı olanı bu.
Böylece sitemizdeki tüm linklere veya diğer kontrolleri tek bir javascript fonksiyonu ile renklendirebiliriz. Renkleride her kontrole istediğimiz gibi verip bir canlılık yaratabiliriz. Tek bir fonksiyonla bu işlemi yapmamız sitemizin performansınıda artıracaktır.
Yazdığımız fonksiyon ise tarayıcılarda sorunsuz biçimde çalışmaktadır.
İyi Çalışmalar!
Mehmet Duran 20 Temmuz Pazar 2008 0 13868 5,0
Javascript Web Tasarım Tasarım-Görsellik Programlama
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net ve Global.asax ile Ziyaretçi İstatistikleri Asp.net ile Dll Oluşturma ve Kullanma ActionScript for Designers C Sharp Get - Set Metotları jQuery ile Dinamik Alanlar Oluşturma (Scroll Olmadan ve Yatay)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Bu Yazı Hakkında Henüz Yorum Yapılmamış.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Kimse sana senden iyi öğüt veremez.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009