Minggu, 03 Februari 2013

Cara Membuat Tombol Mouseover Pada Basic HTML

Setelah sekian lamanya saya tidak aktif dalam blog ini, akhirnya saya akan memulai membuat postingan baru lagi, maklum tahun-tahun ini saya sangat sibuk sekali dalam mengejar pendidikan saya dan pada hari ini saya mendapatkan waktu yang dapat dibilang cukup banyak untuk memulai kembali lagi dalam membuat postingan baru.

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"
sekian dulu ilmu yang saya dapat bagikan kepada anda, semoga postingan hari ini bermanfaat bagi andaterima kasih.

6 komentar:

  1. terima kasih gan infonya,,langsung ane coba deh

    BalasHapus
  2. Thx Infonya..
    Kunjungan pagi hari dari Teh Qorya :)

    BalasHapus
  3. blogwalking gan , baca - baca dulu ya . thanks

    BalasHapus
  4. I really appreciate your professional approach. These are pieces of very useful information that will be of great use for me in future.

    BalasHapus
  5. saya sbgai pengguna blog meras terbantu Gan,, makasih yaaaaa

    BalasHapus

Mohon untuk berkomentar dengan sopan dan tidak melakukan spam
Terima Kasih :)