Kamis, 22 Juli 2010

Cara Membuat Gambar Berubah Saat Terkena Kursor

Penulis Blog | 05.46 | | |
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.

4 komentar:

Copyright ©2010-2013 Starchem05 Designed By: Software Reviews and Downloads Powered by Blogger