Mengganti Gambar Dengan Cara Hovering Pada Gambar lain Di Dalam HTML

Pada tutorial ini, kita akan mecoba mengganti sebuah gambar ketika kita hover mouse cursor pada gambar lain. Hanya untuk memastikan bahwa anda mengerti apa yang akan kita bicarakan pada tutorial ini, silahkan lihat demo dibawah:

Ketika anda hover cursor anda pada gambar "#0", gambar "#1" akan berubah menjadi gambar "#2". Dan, ketika anda jauhkan mouse cursor anda dari gambar "#0", gambar yang sedang aktif sekarang "#2" akan berubah menjadi "#3".

Mengerti kan maksudnya? Ayo kita mulai!

Pertama. Silahkan masukkan gambar "#1" pada HTML anda.

<img border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />

Tapi, kalau anda memasukkan gambar seperti pada code diatas, itu tidak cukup. Anda perlu memberikan ID pada gambar tersebut.

<img id="change_this_image" border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />

Kedua. Mari kita insert gambar "#0" ke dalam HTML.

<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" />

Kita perlu menambahkan "onMouseOver" dan "onMouseout" didalam image tag dari gambar "#0". Kita akan ambil image ID dari gambar "#1" yaitu "change_this_image". Selanjutnya, Kita ingin mengganti gambar "#1" kita kita hover mouse cursor pada gambar "#0". Jadi, hasilnya akan seperti ini:

<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="getElementById('change_this_image').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image').src='http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png'" />

Terakhir, hasil akhirnya akan seperti ini:

<html>
<head>
<title>New Document</title>
</head>
<body>

<img id="change_this_image" border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />

<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="getElementById('change_this_image').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image').src='http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png'" />

</body>
</html>

Anda juga dapat membuat variasi lain seperti ini:



Ketika anda hover cursor anda pada gambar "#0", gambar "#1" akan berubah menjadi gambar "#2". Dan, ketika anda jauhkan cursor anda dari gambar "#0", gambar yang sekarang sedang aktif yaitu gambar "#2" akan berubah menjadi gambar "#3".
Untuk variasinya. Ketika anda hover cursor anda pada gambar "#3", gambar yang diatas akan berubah menjadi "#2". Dan, ketika anda jauhkan cursor anda dari gambar "#3", gambar diatas akan berubah menjadi gambar "#1".
Berikut ini codenya:
<html>
<head>
<title>New Document</title>
</head>
<body>

<img id="change_this_image_again" border="0" src="http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png" />
<br/>
<img border="0" src="http://4.bp.blogspot.com/-adT2013Vz8M/UckPJ6NVzuI/AAAAAAAAAg0/TVxvWRLmhDk/s320/0.png" onmouseover="getElementById('change_this_image_again').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image_again').src='http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png'" />

<img border="0" src="http://2.bp.blogspot.com/-VMQ025ck63g/UckPNcIq_II/AAAAAAAAAhM/kVwNVbYiURI/s320/3.png" onmouseover="getElementById('change_this_image_again').src='http://3.bp.blogspot.com/-onC9xdWu8uU/UckPKrxXcgI/AAAAAAAAAhE/_CAT4iJLvsI/s320/2.png'" onMouseOut="getElementById('change_this_image_again').src='http://3.bp.blogspot.com/-yqnZf73J69I/UckPKCz2jRI/AAAAAAAAAg8/3UPUSqJb-uA/s320/1.png'" />

</body>
</html>

Mudah, kan? Selamat Mencoba!

Labels: , , , ,