Membuat Efek Tombol Gambar Dinamis

Share/Bookmark

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:
<style type="text/css">
img{
border:hidden;
}
</style>
<a href="#" onMouseOver="document.tombol.src='2.png'" onMouseOut="document.tombol.src='1.png'">
<img src="1.png" name="tombol" width="75"/></a>

Pada koding diatas sebetulnya terdapat 3 jenis kode, diantaranya adalah kode CSS, JavaScript dan kode HTML. Pada kode yang berwarna biru merupakan kode CSS yang berfungsi untuk menghilangkan garis frame. Secara default, suatu gambar yang akan ditampilkan terdapat suatu frame. Kode berwarna oranye merupakan kode JavaScript yang berfungsi untuk menjalankan tombol dinamis tersebut. Sedangkan yang berwarna hitam merupakan kode HTML yang berfungsi untuk membantu proses manampilkan objek dari JavaScript itu sendiri.

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.

download

Tulislah Komentar Anda


Komentar anda sangat berguna bagi kemajuan blog ini.

Post a Comment

Xinthinx Blog Tutorial © 2008 Template by Dicas Blogger, emoticon from Yahoo! and KASKUS.

TOPO