Mengubah gambar pada mouse hover dengan menggunakan CSS
Feb 09 2008

Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 12998 kali

Langsung lihat komentar

Oke, setelah lama tidak menulis tutorial baru (lagi buat website baru :D) sekarang saya akan menulis artikel lagi. Kali ini kita akan mempelajari bagaimana membuat efek mouse hover pada images. Membuat gambar yang berubah, sebenarnya cukup mudah apabila kita menggunakan Javascript, tapi kali ini saya akan mengajarkannya menggunakan CSS saja, tanpa Javascript sama sekali.
Mengubah Posisi Background

Cara yang akan kita gunakan disini adalah mengubah posisi background. Jadi kita memiliki gambar tombol ketika berada dalam posisi normal dan ketika mouse hover dalam 1 gambar. Nah nanti kita tinggal mengubah posisi background pada CSS nya saja sehingga terkesan tombol kita berubah. Bingung? lihat dulu contohnya seperti ini.

Oke pertama-tama anda save tombol dibawah ini, simpanlah dengan nama tombolhover.jpg
Contoh Tombol
Setelah itu buatlah file index.html dan isilah dengan kode berikut ini:

silakan kalian salin

Silahkan dicoba file index.htmlnya, mudah kan? oke sekarang saya jelaskan kenapa bisa begitu.
Fungsi CSS background-position

Jika anda perhatikan pada CSS pada class tombol a.tombol, kita mengatur width:107px dan height:31px, padahal width dan height gambar kita ukurannya 107px x 62px. Sehingga pada background: url(tombolhover.jpg) yang ditampilkan hanya selebar 107 px dan setinggi 31px, dimana kita akan dapatkan gambar yang paling atas saja. Lebih jelasnya silahkan lihat ukuran gambarnya dibawah ini.
Ukuran Tombol
Jadi karena kita menampilkan background 31px yang paling atas, maka yang tampil adalah tombol yang atas.

Berikutnya untuk mouse hovernya a.tombol:hover kita menggunakan background-position: 0 -31px. Maksudnya ini kita mengubah tampilan background pada koordinat y sebesar -31px. Jadi gambar yang ditampilkan berkurang 31px sehingga yang tampil adalah tombol yang bawah.

Bagaimana? mudah kan, ini hanya dasarnya saja, anda dapat mengembangkannya sendiri. Selamat mencoba...
Simpan artikel ini ke: Digg it Del.icio.us Furl Reddit
Komentar [27]
1
Komentar Dikirim oleh cosmo_obi pada 11 Februari 2008 03:47:22 WIB

Wah, lumayan nih. Sebenernya dah tahu dari doloe, tapi baru keinget sekarang. Oza, artikel ReWriting URLnya belom ada za?
2
Komentar Dikirim oleh doni pada 17 Februari 2008 05:40:49 WIB

bagus banget ! thank's ya
3
Komentar Dikirim oleh Surya - balikpapan pada 10 Maret 2008 12:10:10 WIB

Tolong dong di jelasin .... tetang di bawah ini, dan #bookmark itu , apaan sih.. apakah bookmark merupakan file sendiri, atau temporari saja....



lalu untuk data yg udah di input orang lain, code nya apa dong supaya bisa tampil di form, diatas nya??


kurang banyakkkkkkk ..... ..... yg ditulis . . . he h e he

Posted in: