Cara Membuat Gambar Berubah Saat Terkena Kursor

Gambar, ini merupakan salah satu hal yang penting dalam sebuah website, krena dengan gambar tersebut, website atau blog kita akan menjadi lebih menarik. Akan lebih menarik lagi bila terdapat variasi gambar, misalnya dengan cara membuat gambar berubah saat terkena kursor.

Berikut ini akan saya jelaskan bagaimana membuat gambar yang dapat berubah saat terkena kursor. Pertama-tama, sediakan 2 gambar. Tentunya, pilih gambar yang agak mirip.

menjadi

Gambar sebelum terkena kursor menjadi gambar setelah kursor.

Sehingga bila gambarnya digabungkan akan menjadi:

Kode HTML untuk gabungan gambar tersebut adalah:

<img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Oyk19qqvl7781NGC3Vk_3bEhwHcr2DwmCeo0hmNuzA2jbDTQykHEay79L8z-KP5TIDRZGXsC3PK3rExEkjb39thqZMRtExGyQrJ8NQ7pphDE8gLt432tKwwBLi71BKCyo0q_4h0z-KNg/s1600/cooltext-starchem05.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH829eobqTr5r0EQFQ7Je8GOSxrXWFfTk9lj9SWIwByIr3LpeNkgw73wOMay2c-WTXh-7q6vbnhRT88BpB6hyphenhyphenUYZB8ckqBsaiCIsCv2ew1O1c-00v-rewxnnp0dunWXWX_B3FC7oQaGlsw/s1600/cooltext-starchem05-2.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Oyk19qqvl7781NGC3Vk_3bEhwHcr2DwmCeo0hmNuzA2jbDTQykHEay79L8z-KP5TIDRZGXsC3PK3rExEkjb39thqZMRtExGyQrJ8NQ7pphDE8gLt432tKwwBLi71BKCyo0q_4h0z-KNg/s1600/cooltext-starchem05.png" />

Keterangan:

• Teks yang berwarna merah  adalah url gambar sebelum terkena mouse yaitu https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Oyk19qqvl7781NGC3Vk_3bEhwHcr2DwmCeo0hmNuzA2jbDTQykHEay79L8z-KP5TIDRZGXsC3PK3rExEkjb39thqZMRtExGyQrJ8NQ7pphDE8gLt432tKwwBLi71BKCyo0q_4h0z-KNg/s1600/cooltext-starchem05.png ganti dengan url gambar Anda.
• Teks yang berwarna biru adalah url gambar setelah terkena mouse yaitu https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH829eobqTr5r0EQFQ7Je8GOSxrXWFfTk9lj9SWIwByIr3LpeNkgw73wOMay2c-WTXh-7q6vbnhRT88BpB6hyphenhyphenUYZB8ckqBsaiCIsCv2ew1O1c-00v-rewxnnp0dunWXWX_B3FC7oQaGlsw/s1600/cooltext-starchem05-2.png ganti dengan gambar yang Anda inginkan.

Selain cara di atas, terdapat juga cara dengan hover. Tapi cara hover tidak akan saya jelaskan disini.