Mouse over di html


1.   Siapkan 2 gambar dalam 1 folder. beri nama gambar1.jpeg  dan gambar2.jpeg

2.   Tuliskan text seperti dibawah ini di notepad. lalu save dengan nama = mouseover.html

<html><head>
<title>Mouse Over</title>
</head>
<body>
<a href = "javascript:;"
onMouseOver="document.img_1.src='gambar1.jpeg';"
onMouseOut="document.img_1.src='gambar2.jpeg';" >
<img name="img_1" src='gambar2.jpeg' height='100' width='100'></a>
</body></html>

3.   Hasilnya :

jika kursor diarahkan didalam gambar, maka gambar akan berubah menjadi seperti dibawah ini

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s