Berlangganan Artikel Via Email

Posting Terbaru

Membuat Mouse Over Button

|

Membuat Mouse Over Button - Tau Mouse Over Button ga? pasti banyak yang udah tau, tapi mungkin banyak juga yang belum tau. Moso sih ada yang loem tau? ya ada dunk, kan blogger baru tiap hari juga terus bertambah dan belum tentu juga seorang blogger selalu mengerti pengkodean. Selain itu juga kemarin teman saya juga bertanya bagaimana cara membuatnya, jadi sekalian saya tulis saja.

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

Contohnya seperti ini (arahkan cursor anda ke gambar):



Cara bikinnya:
1. Siapin dulu 2 gambar, 1 gambar utamanya dan satu lagi untuk hovernya.
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. Pengkodeannya [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 seperti ini :


Pengkodeannya:

<a href="http://www.myherro.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>


tinggal ganti http://www.myherro.com dengan link tujuan anda.

13 komentar:

Post a Comment