Mengganti Gambar Dengan Menggunakan "onmouseover" Dan "onmouseout" di HTML

Hanya untuk memastikan bahwa anda mengerti apa yang akan anda pelajari pada tutorial ini, silahkan coba untuk hover/letakkan cursor anda di atas gambar berikut:

Mengerti maksudnya? Ketika anda hover cursor anda pada "#0", gambarnya akan tertukar menjadi "#1". Selanjutnya, gambarnya akan kembali ke "#0", ketika anda menjauhkan cursor anda dari gambar tersebut. Ayo kita lihat bagaimana cara membuatnya!

kita hanya perlu menggunakan "onmouseover" dan "onmouseout" di dalam image tag. Mari kita mulai dengan melihat code dibawah ini atau anda bisa copy dan paste code berikut pada code editor yang sudah anda install pada komputer anda:

HTML: 
<html>
<head>
</head>
<body>

<img src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="this.src='this.src='http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png'" onmouseout="this.src='this.src='http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png'" />

</body>
</html>

Begini penjelasannya. Pertama, kita load gambar "#0". dengan menggunakan "onmouseover", ketika anda hover cursor anda pada image tersebut, gambarnya akan tertukar menjadi "#1". Selanjutnya, anda dapat menggunakan "onmouseout" untuk mengganti gambar menjadi "#0" ketika anda menjauhkan cursor anda dari area gambar.

Mudah, kan? Selamat Mencoba!

Labels: , , , ,