Mohon maaf, mungkin terdapat beberpa artikel yang contohnya tidak ada dan tidak dapat didownload bahkan sudah tidak dapat diterapkan. Hal ini dikarenakan artikel tersebut ditulis babaerapa tahun lalu (jadul).

19 June 2010

Membuat Efek Tombol Gambar Dinamis

Nah, setelah beberapa artikel yang lalu saya menuliskan bagaimana cara membuat text field dinamis, sekarang saya akan mencoba menuliskan artikel yang sama caa kerjanya tapi berbeda berdasarkan fungsinya. Masih bingung apa yang saya maksud mikir ? Ok, sedikit penjelasan yang akan saya sampaikan. Maksud dari tombol dinamis ini adalah, ketika kita membuat suatu tombol bergambar dan ketika kursor didekatkan, maka tombol gambar tersebut tampak terlihat timbul.
Contoh di samping ini merupakan Tombol dinamis yang saya maksudkan dan kita akan mencoba membuat tombol tersebut untuk ditampilkan pada suatu web atau blog yang kita miliki. Ok, tanpa banyak penjelasan lagi, langsung saja kita mulai membuat seperti di samping ini. bagooos

Untuk membuat tombol tersebut, awalnya kita membutuhkan 2 buah gambar yang akan di tampilkan. yakni 1 gambar yang ditampilkan sebelum kursor didekatkan dan satu gambar lainnya ditampilkan ketika kursor didekatkan. Disarankan agar kedua gambar tersebut sama tampak visual namun salah satu gambarnya berukuran sedikit lebih kecil dan diberi efek gambar berupa frame. Jika sudah, mari kita ke tahap selanjutnya.

Tahap selanjutnya ini, kita akan mencoba memulai menuliskan suatu koding. Koding tersebut adalah:
<div href='http://contohnya.net/' onmouseout='document.tombol.src='1.png'' onmouseover='document.tombol.src='2.png''>
  <img align='left' name='tombol' src='1.png' width='100' />
</div>
Penjelasan dari kode inti HTML yang tertulis di atas adalah :
  1. onMouseOver="document.tombol.src='2.png'"
    Kode ini berfungsi ketika kursor mouse bergerak menjauhi objek yang telah ditentukan tersebut.
  2. onMouseOut="document.tombol.src='1.png'"
    Kode ini berfungsi ketika kursor mouse berada pada objek yang telah ditentukan tersebut.

Nah, sekian sedikit tutorial dari saya mengenai membuat tombol dengan membuat efek. Untuk lebih jelasnya dapat mengunduh file berikut ini.

No comments:

Post a Comment