Kita dapat menggunakan event onMouseOver dan onMouseOut untuk bertukar gambar dan membuat gambar rollover link navigasi. Ini dapat berfungsi ketika mouse melewati link kita dan dapat menampilkan gambar yang lain.
Hal ini dilakukan dengan menggunakan dua gambar. Satu gambar akan ditampilkan lebih dulu sebagai link hiper dan dengan onMouseOut gambar lainnya akan ditampilkan. Berikut adalah dua gambarnya :
Hal ini dilakukan dengan menggunakan dua gambar. Satu gambar akan ditampilkan lebih dulu sebagai link hiper dan dengan onMouseOut gambar lainnya akan ditampilkan. Berikut adalah dua gambarnya :
Gambar 1 |
Gambar 2 |
Kita akan menggabungkan 2 gambar tersebut menjadi satu dan hasilnya akan menjadi seperti dibawah ini :
Langkah Pembuatan :
- Masuk ke Blogger.com
- Masuk Ke Posting > Entri Baru
- Ketika ingin membuat gambar seperti diatas, anda hanya butuh menyisipkan kode dibawah ini di Edit HTML pada postingan anda.
<center>
<a onmouseout="document.my_image.src='http://3.bp.blogspot.com/-H8cTyPzy_1A/TacdQsTLl5I/AAAAAAAAAyI/zXFK4xGK5M8/s1600/correct.jpg'" onmouseover="document.my_image.src='http://1.bp.blogspot.com/-9ewhAlDr8nI/TacdQHZu5qI/AAAAAAAAAyE/Zep6DNtzQjM/s1600/wrong.jpg'"><img 0="" name="my_image" src="http://3.bp.blogspot.com/-H8cTyPzy_1A/TacdQsTLl5I/AAAAAAAAAyI/zXFK4xGK5M8/s1600/correct.jpg" /></a></center>
Keterangan :
- Ubah Tulisan Berwarna Merah Dengan URL Gambar Sebelum Di Sentuh Kursor
- Ubah Tulisan Berwarna Biru Dengan URL Gambar Setelah Disentuh Kursor
Semoga Artikel Ini Bermanfaat...!
0 Response to "Membuat Gambar Berubah Saat Disentuh"
Posting Komentar