Kamis, 22 Juli 2010

Cara Membuat Gambar Berubah Saat Terkena Kursor

Chemicals | 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='http://2.bp.blogspot.com/_3T6iBQSYu6E/TDWzoEwnI0I/AAAAAAAAALk/TAqr1CZKKnA/s1600/cooltext-starchem05.png';" onmouseover="this.src='http://2.bp.blogspot.com/_3T6iBQSYu6E/TEdz9wIOg8I/AAAAAAAAAOk/cs9ooh_Xe6U/s1600/cooltext-starchem05-2.png';" src="http://2.bp.blogspot.com/_3T6iBQSYu6E/TDWzoEwnI0I/AAAAAAAAALk/TAqr1CZKKnA/s1600/cooltext-starchem05.png" />

Keterangan:
  • Teks yang berwarna merah  adalah url gambar sebelum terkena mouse yaitu http://2.bp.blogspot.com/_3T6iBQSYu6E/TDWzoEwnI0I/AAAAAAAAALk/TAqr1CZKKnA/s1600/cooltext-starchem05.png ganti dengan url gambar Anda.
  • Teks yang berwarna biru adalah url gambar setelah terkena mouse yaitu http://2.bp.blogspot.com/_3T6iBQSYu6E/TEdz9wIOg8I/AAAAAAAAAOk/cs9ooh_Xe6U/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.

5 komentar:

  1. kalau memakai link gimana mas...?

    BalasHapus
  2. mantabh gan ini yang saya cari hehehehe

    BalasHapus
  3. makasih banyak gan, htmlnya work!! visit ya http://aptx.wap.sh/chatbox

    BalasHapus

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