Javascript onMouseout ve onMouseover, Bu makalemizde HTML nesnelerinin ortak EventHandler’larından olan onMouseover ve onMouseout EventHandler’larını javascript ile kullanımını göreceğiz.
Javascript onMouseout ve onMouseover Nedir?
| EventHandler | Açıklama |
|---|---|
| OnMouseOver | Mouse nesnenin üzerine geldiğinde tetiklenecek |
| OnMouseOut | Mouse nesnenin üzerinden ayrıldığında tetiklenecek olay |
Şimdi bu örneğimizde türk bayrağı resminin üzerine gelindiğinde 9px boyutunda çerçeve eklenecek mouse ayrıldığında ise çevreve 0 olacak yani kaybolacaktır.
Html Örnek Kod
1 2 3 | <h3>İmleci görselin üzerine getirin</h3> <img rel="lightbox" onMouseOver="resimcerceve()" onMouseOut="resimcerceveyok()" src="https://flag.muratoner.net/" name="resim" border="0" /> |
Javascript Örnek Kod
1 2 3 4 5 6 | function resimcerceve() { document.resim.border = 9; } function resimcerceveyok() { document.resim.border = 0; } |
Demo
Özet
Aslında html elementleri üzerinde kullanabileceğiniz çok fazla event’ler bulunmaktadır ama bu makale’de sadece 2 event üzerinden basit bir örnek ile tanımladığımız bir html img elementi üzerine imleci götürdüğünüzde ve imleci img etiketi üzerinden çektiğinizde javascript tarafında tanımladığımız javascript fonksiyonlarının tetiklenmesini sağladık. Eğer tek ihtiyacınız bu örnekte ki gibi ilgili element üzerine gelindiğinde stil düzenlemesi yapmak ise css tarafında daha basit bir yolu olduğunu belirtmekte fayda var. Örnek olarak alttaki css örneği ile img elementi üzerine geldiğinizde img:hover css seçicisi devreye girecektir ve ayrıldığınızda varsayılan görünümüne geri dönecektir.
HTML
1 2 3 | <h3>İmleci görselin üzerine getirin</h3> <img rel="lightbox" src="https://flag.muratoner.net/" name="resim" border="0" /> |
CSS
1 2 3 | img:hover { border-width: 9px; } |
Demo
📚 Benzer Makaleler
- Javascript Media Query Nedir ve Nasıl Kullanılır?
- Javascript “Opsiyonel Zincirleme “Optional Chaining” Operatörü Nedir?
- CSS Uppercase Türkçe Karakter Problemi
- CSS3 Resize Özelliği İle Nesnelere Boyutlarını Değiştirebilme Özelliğini Katma
- Javascript RegExp İle Veri Doğrulama, Değiştirme, Arama
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
Peki resmin üzerine gelince farklı bir resim çıkması için html de hangi kodu kullanacağız. Yardımcı olabilirmisiniz acaba?
OnMouseOver event’inin bunun için kullanabilirsiniz. şimdi bir img etiketi üzerine geldiğinde resmi nasıl değiştireceğimizi görelim.
onmouseover metodu üzerine gelince varolan resmi window adlı global nesne içerisinde beforeimage adlı değişken içine attım daha sonrada this.src özelliğini kullanarak resmi değiştirdim.
onmouseout event’i sayesinde mouse resim üzerinden ayrılınca this.src özelliğine beforeimage içerisine attığım varsayılan resmi tekrar atadım.
Ben örnek olması açısından direk attribute içerisine yazdım kodları ama siz javascript fonksiyonları yazarak kullanırsanız kod daha okunaklı olacaktır.