İ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;
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.
Oluşan görüntü ise;
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!