HTML Mouse ve Klavye Olayları

24 Ekim 2013 Perşembe

HTML Mouse ve Klavye Olayları

onclick= Elemente klavye veya fare ile tıklandığında tetiklenir.
ondblclick= Elemente fare ile çift tıklandığında tetiklenir.
onmousedown= Element üzerinde fare tuşuna basıldığında tetiklenir.
onmouseup= Basılı olan fare tuşu bırakıldığında tetiklenir.
onmouseover= Elementin kapladığı alana girildiğinde tetiklenir.
onmousemove= Element üzerinde fare işaretçisi hareket ettirildiğinde tetiklenir.
onmouseout= Elementin kapladığı alandan çıkıldığında tetiklenir.
onkeypress= Element üzerindeyken klavyeden bir tuşa basıldığında tetiklenir.
onkeydown= Element üzerindeyken klavyeden bir tuşa ilk basıldığında tetiklenir.
onkeyup= Basılı olan klavye tuşu bırakıldığında tetiklenir.
onfocus= Elemente odaklanıldığında tetiklenir.
onblur= Element odaklanmasını yitirdiğinde tetiklenir.

Birkaç örnek verelim

Mouse Üzerine Gelince Değişen Resim Kodu

<a href="BURAYA SITE YADA ADRES LINKI YAZIN!"><img boyd=""<img border="0" onmouseout="this.src='IKINCI GOZUKECEK RESIM URL'SINI BURAYA YAZIN';" onmouseover="this.src='ILK GOZUKECEK RESIM URL'SI BURAYADA YAZIN';" alt="" src="ILK GOZUKECEK RESIM URL'SI BURAYA YAZIN" /></a>

Mouse Üzerine gelince duran kayan yazı kodu

<marquee onmouseover="this.stop()" onmouseout="this.start()" width="300" height="300" direction="Up" scrollamount="1" scrolldelay="60" loop="99999">
YAZININ GELECEĞİ YER / HTML KODLARDA GELEBİLİR</marquee>

Mouse Üzerine gelince yazıda bilgi kutucuğu çıkartmak

<font title="Yazımızın burada olduğunu belirtmek istedik">Yazımız normal şekilde burada yazıyor.</font>

Mouse Üzerine gelince resimde bilgi kutucuğu çıkartmak

<img src="Günbatımı.jpg" width="231" height="172" title="Resmimizin adı: Gün Batımı" />

Mouse Üzerine gelince renk değiştiren buton

<input type="button" value="Utangaç buton" onmouseover="this.style.background='red'"/>

Üzerine Gelince Renk Değiştiren Yazı

<HTML>
<HEAD>
<TITLE>Üzerinden gelince renk değiştiren yazı</TITLE>
<STYLE>
A:link {color: blue}
A:visited {color: purple}
A:hover {color:red}
A:active {color:yellow}
</STYLE>
</HEAD>
<BODY>
<A href="" _fcksavedurl="">Fare imleci bu yazının üzerine geldiğinde renk değiştirecek</A>
</BODY>
</HTML>

Kaynak : "WebSeyyahi"