HTML Mouse ve Klayye Olayları

HTML Mouse ve Klayye 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>

<style>
.degis {
width: 468px;
height: 60px;
background: url(RESİM1 URL);
}
.degis:hover {
width: 468px;
height: 60px;
background: url(RESİM2 URL);
}
</style>
<br />
<div class="degis">
</div>
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>

6 yorum:

  1. Teşkkür ediyorum güzel bilgiler.

    YanıtlaSil
  2. HTML de tüm linklerin altını çizme kodu

    <style type="text/css">
    a:hover{text-decoration:underline;}
    </style>

    YanıtlaSil
    Yanıtlar
    1. <head> .... </head> ARASINA eklenir

      Sil
  3. <style type="text/css">
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    </style>

    linklerin altındaki çizgiyi kaldırmak için

    YanıtlaSil
  4. Benim konuyla ilgili başka bir açmazım var. Diyelimki sayfanın farklı yerlerinde renk değiştiren ya da saydamlaşan 2 tane buton var. Mause ile bu butonlardan herhangi birisinin üzerine gelince diğer butonda renk değiştirsin yada saydamlaşsın. Yani özet olarak 2 buton birbiriyle kontak halinde olsun.
    Ne işe yarayacak bu derseniz eğer... 2 butonda aynı sayfaya yönlendirme yapıyor. Çok basit birşeymiş gibi geliyor ama konuyla ilgili hiç birşey bilmiyorum hiç bir bilgim yok.

    YanıtlaSil
    Yanıtlar
    1. Anladım. Olabilecek bir durum.
      Profesyonel Yardımlarımız Ve Danışmanlık Hizmetlerimiz Ücretli olduğunu hatırltmak isteriz.

      Sil