Baiklah, saya akan membagikan pengetahuan saya kepada anda sesuai dengan pembelajaran yang saya dapatkan, yaitu Cara Membuat Tombol Mouseover Pada Basic HTML
saya tidak perlu menjelaskan panjang lebar apa itu mouseover, karena bagi anda yang menemukan postingan ini pasti sudah tahu apa itu mouseover. Intinya, tombol mouseover ini fungsinya ntuk mempercantik tampilan website atau blog anda, yang jika suatu gambar/button bila disentuh dengan cursor mouse anda, tampilan gambar/button tersebut akan berubah. Contohnya seperti di bawah ini :
Baiklah, contoh diatas adalah contoh dari tombol mouseover hasil kerja saya sendiri, walaupun designnya kurang bagus, tapi anda sudah mendapatkan gambaran apa itu tombol mouseover.
Dan sekarang saya akan memberitahukan kepada anda cara membuatnya, sangat simpel yaitu dengan kode seperti ini :
<img src="Gambar1.gif" width=235 onmouseover="this.src='Gambar2.gif';"onmouseout="this.src='Gambar1.gif';" />
Dengan catatan :
- Anda sebelumnya harus mempunyai dua buah gambar/tombol untuk membuat tombol mouseover ini.
- Gambar1 merupakan gambar yang akan muncul sebelum cursor menyentuh gambar/tombol tersebut.
- Gambar2 merupakan gambar yang akan muncul jika cursor menyentuh gambar/tombol tersebut.
- Anda bisa menyesuaikan lebar gambar dengan mengatur besar Width sesuai selera anda.
- Jangan lupa jika anda ingin menyisipkn link di tombol tersebut dengan memberikan tag
<a href="link yang ingin dituju"><kode mouseover diatas/></a> - Gambar/button yang anda siapkan sebaiknya berformat "gif" dan jangan menggunakan format "jpg"