Untuk membuat hal yang interaktif pada website, tentu perlu menggunakan event — kode yang dipakai setiap hal yang terjadi pada browser, dan kemudian memungkinkan untuk menjalankan kode sebagai respon hal yang terjadi tersebut. Contoh yang paling sering terjadi adalah click event,pada kesempatan kali ini saya akan membahas tentang beberapa event lainnya dalam bagaimana Cara Mengubah Gambar Menggunakan Event onmouseover dan onmouseout Pada Javascript.
Pengertian dari event onmouseover dan onmouseout itu sendiri seperti efek yang diberikan saat ada pergerakan mouse ,
onmouseover : adalah event dimana jika cursor mouse mendekati pada element html.
onmouseout : adalah event dimana jika cursor mouse sudah menjauhi element html.
Baiklah langsung di praktekan saja berikut caranya, sahabat langsung ketikan sintax html seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Cara Mengubah Gambar Dengan Event onmouseover dan onmouseout Pada Javascript</title> <body> <div class="container"> <div class="boxes"> <img src="ai.jpg" id="gambar" onmouseover="GambarBaru()" onmouseout="GambarLama()"> </div> </div> </body> </body> </html> |
Pada sintax html saya berikan id = gambar dan saya memberikan nama function GambarBaru untuk menampilkan gambar yang akan muncul sedangkan function GambarLama untuk gambar awalnya.
Langkah berikutnya saya memberikan sedikit sintax CSS supaya rapi ya tampilannya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body{ padding: 0; margin: 0; } .container{ width: 300px; margin: auto; } .boxes{ background: #045199; text-align: center; } .boxes img{ margin: 20px 0; } |
Dan langkah berikutnya silahkan ketikan script Javascript nya seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> function GambarBaru() { document.getElementById("gambar").src ="en.jpg"; } function GambarLama() { document.getElementById("gambar").src ="ai.jpg"; } </script> |
JIka sudah diketikkan semuanya coba sahabat jalankan pada browser masing-masing dan arahkan mouse ke gambar ,maka yang terjadi gambar yang awal akan berubah dengan yang baru. Seperti efek hover saja bukan pada css.
Demikian pembahasan artikel kali ini semoga bermanfaat dan sampai jumpa lagi dengan artikel selanjutnya.
terima kasih,