Aşağıdaki örnek Internet'te sıkça kullanılan ve Java Button diye anılan butonların nasıl çalıştığına bir örnektir. Bu butonlar mouse pointer üstlerine geldiği anda değişiyorlar ve pointer üstlerinden çekildiğinde eski hallerine dönüyorlar. Biz de bu işlemi yapan bir fonksiyon yazacağız ve butonun onMouseOver ve onMouseOut olaylarını bu fonksiyona göndererek resmi değiştireceğiz.
<html>
<head>
<script LANGUAGE="JavaScript">
{
res1 = new Image();
res1.src = "resim1.gif";
res2= new Image();
res2.src="resim2.gif";
}
function changeImage(imgDocId,imgObjName) {
document.images[imgDocId].src = eval(imgObjName + ".src");
}
// --></script>
</head>
<body>
<a href="http://www.programlama.com" onMouseOver="changeImage('buton','res1')"
onMouseOut="changeImage('buton','res2')">
<img src="resim1.gif" border="0" name="buton"></a><br>
</body>
</html>
Bir de Internet'te her gün rastladığımız linklere renk ve hareket getirecek bir script örneği verelim:
<HTML>
<HEAD>
<STYLE>
.on {
font-size:12;
text-decoration:underline;
color:red;
}
.off {
font-size:12;
color:black;
}
</STYLE>
</HEAD>
<BODY>
<A HREF="http://www.programlama.com" class="off" onMouseOver="this.className='on';" onMouseOut="this.className='off';">Gel Bakalim</A>
</BODY>
</HTML>
<t>Burada STYLE tag'i içinde iki adet class tanımlıyoruz ve bunlara on ve off adlarını veriyoruz. Linkimize de başlangıç olarak off classını atıyoruz. onMouseOver olayında linkin classını on, onMouseOut olayında ise tekrar off yapıyoruz. Örnekte normalde siyah olan link, üzerine gelindiğinde kırmızı ve alt çizgili olmaktadır. Bu classların yapılarıyla oynayarak çok değişik linkler elde etmek mümkün.
