Saturday, 2 February 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.

0 komentar:

Post a Comment

Jadilah orang yang memberikan komentar yang baik untuk semuanya!

Twitter

Artikel Populer

Blog Archive

Template Ini Di buat oleh Blog Informasi dan Berita Unik Terbaru ( Zain Fikri H ) yang didukung oleh Blogger