Tuesday, December 05, 2006

Ganti Gambar saat Mouse Over

Maksudnya judul itu apa sih? Gini saat kamu kunjungi sebuah web dan arahkan cursor ke sebuah gambar tiba-tiba gambar itu berubah. Nah itulah yang dimaksudkan dengan judul ini. Scriptnya sendiri menggunakan peprograman Java script

Kebanyakan javascript untuk change image when mouse over panjang-panjang euy. Tapi tiba-tiba aja nemu yang cara super ringkas. Begini caranya

Langkah Pertama
Taruh script ini dibagian <head> </head>


<script language="JavaScript" type="text/javascript">
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>


Langkah Kedua
Taruh script tambahan di bagian a href pada image. Contohnya ialah dibawah ini


<a href="some.html"
onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<img src="icon1.gif" width="100" height="50" name="but1" border="0">
</a>


OK. Itu aja. Cukup sederhana kan?
Untuk melihat contoh dan script yang lebih lebih langsung aja ke Web Developers Notes

1 comment:

  1. Nice post! Can’t wait for the next one. Keep stuff like this coming.
    Asus Laptops

    ReplyDelete