Posting ini akan menunjukkan prosedur untuk mengubah gambar saat melayang di JavaScript.
Bagaimana Cara Mengubah Gambar di Hover di JavaScript?
Untuk mengubah gambar pada hover, gunakan tombol “ onmouseover ' peristiwa. Saat mouse/kursor digerakkan melalui elemen HTML atau salah satu turunannya, event onmouseover dipicu.
Contoh 1: Ubah Gambar di Hover di JavaScript
Dalam file HTML, gunakan tag untuk menampilkan gambar di halaman web. Lampirkan “ onmouseover ” yang akan memanggil fungsi JavaScript saat mouse diarahkan ke gambar:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'arahkan (ini);' />
Dalam file JavaScript, tentukan fungsi “ melayang ” dengan parameter “ img ”. Dalam fungsi yang ditentukan, atur gambar yang akan ditampilkan di hover:
fungsi melayang ( img )
{
img. src = '2.jpg'
}
Seperti yang Anda lihat, di output, saat kita mengarahkan kursor ke gambar saat ini, tiba-tiba berubah:
Contoh 2: Alihkan Gambar di Hover
Pada contoh di atas, gambar berubah saat mouse diarahkan ke gambar, dan gambar yang sama tetap ada. Sekarang, dalam contoh ini, gambar pertama akan muncul kembali saat mouse bergerak keluar dari gambar. Efek ini disebut efek toggling. Untuk tujuan ini, kami akan menggunakan ' onmouseover ' dan ' onmouseout ” Properti HTML:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'arahkan (ini);' onmouseout = 'arahkan kursor ke luar (ini)' />
“ onmouseover ” memanggil “ melayang-layang() ” berfungsi sementara, “ onmouseout ” acara memanggil fungsi “ hoverOut() ”:
fungsi hoverOut ( img ) {img. src = '1.jpg'
}
Keluaran menunjukkan bahwa gambar berhasil diubah saat mouse berada di atas gambar dan diubah saat mouse keluar dari gambar:
Itu semua tentang perubahan gambar saat melayang.
Kesimpulan
Untuk mengubah gambar saat melayang, gunakan tombol “ onmouseover ' peristiwa. Untuk efek toggling, gunakan tombol “ onmouseover atribut ” dengan “ onmouseout ' peristiwa. Saat mouse/kursor digerakkan melalui elemen atau salah satu anaknya, event onmouseover dipicu, sedangkan saat mouse/pointer dipindahkan keluar dari elemen, event onmouseout terjadi. Dalam posting ini, kami mendemonstrasikan prosedur untuk mengubah gambar saat melayang di JavaScript.