Make "mouse over image button"
Monday, November 28, 2011
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 :

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

alamat url gambar : http://i530.photobucket.com/albums/dd341/herrolim/donlotOver.png
2. Code (perhatikan alamat url gambarnya):
3. Memberi link tujuan kalau tombol diklik :
Contoh:

Code:
ganti http://bcodescripts.blogspot.com dengan link tujuan yang anda inginkan.
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.
Tag:
button,
image,
mouse over