Mouseover Image Change

Sudah agak lama saya tidak memposting tentang tutorial blog, karena beberapa hari kebelakang postingannya agak melankolis dan bertema religi. Kali ini saya posting tentang Mouseover Image Change yaitu ketika kita meletakkan tanda panah “si tikus” diatas gambar maka gambarnya akan berubah, hal ini pernah saya pake pada tulisan Butterfly smile pada tulisan itu saya menggunakan dua gambar yang satu file gif berwarna hitam putih dan satu lagi pake file gif bergerak biar kelihatan lebih “hidup” gituh.

Nah saya mah gak akan menceritakan yang terlalu rumit, jika ingin mencoba silahkan coba copy kode:

<input onmouseover=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”;this.innerText = ”; this.src = ‘URL GAMBAR 1‘; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.src = ‘URL GAMBAR 2; }” src=”URL GAMBAR 2” type=”image” />

catatan:

- GAMBAR 2 adalah yang pertama muncul sedangkan GAMBAR 1 adalah gambar yang muncul setelah mouse ada diatasnya

- nulisnya harus pake MODE HTML yah, kalau ngga bisa ngga jalan

Hasilnya lihat di tulisan ini pada gambar yang paling bawah

Tapi satu hal yang penting jangan tanyakan saya tentang penjelasan kode phpnya, soalnya ini juga hasil nemu dirumahnya pak Marsudiyanto, tapi sssttt jangan bilang-bilang yah!! habis saya ngga dikasih tahu, jadi mencari tahu sendiri tapi dapatnya malah tempe, hehe

Incoming search terms for the article:

• mouse over
• mouse over image
• arti mouseover
• image change when mouse over
• mouseover image

Jika anda menyukai tulisan ini, silahkan berkomentar atau berlangganan melalui RSS feed untuk mendapatkan update terbaru. atau

Berlangganan melalui email

Masukkan Email Anda:

*cek email anda lalu klik link konfirmasi