Make "mouse over image button"

Monday, November 28, 2011 By: Black Cover
Tahu Mouse Over Button? Jika belum tahu, lihat cara membuatnya.

Mouse Over Button itu adalah tombol yang kalau diarahkan cursor mouse akan berubah warna atau bentuknya, atau kata lainnya hover.

Contoh (arahkan cursor anda ke gambar):



Ok, berikut cara bikinnya:
1. Siapkan dulu 2 buah gambar, 1 gambar utama dan satu lagi untuk hover-nya.
Contoh :
  • Gambar 1:

alamat url gambar : http://i530.photobucket.com/albums/dd341/herrolim/donlot.png

  • Gambar 2:

alamat url gambar : http://i530.photobucket.com/albums/dd341/herrolim/donlotOver.png

2. Code (perhatikan alamat url gambarnya):

<img src="http://i530.photobucket.com/albums/dd341/herrolim/donlot.png" onmouseover="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlotOver.png';" onmouseout="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlot.png';" />


3. Memberi link tujuan kalau tombol diklik :

Contoh:


Code:

<a href="http://bcodescripts.blogspot.com"><img src="http://i530.photobucket.com/albums/dd341/herrolim/donlot.png" onmouseover="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlotOver.png';" onmouseout="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlot.png';" /></a>


ganti http://bcodescripts.blogspot.com dengan link tujuan yang anda inginkan.

Post a Comment