Mengubah gambar pada mouse hover dengan menggunakan CSS

Artikel CSS (Cascading Stylesheet)

Home
- » CSS (Cascading Stylesheet)
  - » Mengubah gambar pada mouse hover dengan menggunakan CSS

Mengubah gambar pada mouse hover dengan menggunakan CSS

Feb 09 2008

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

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Mouse Hover hanya dengan CSS</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="Mouse Hover, CSS" />

<meta name="Description" content="Mouse Hover hanya dengan CSS" />

<style type="text/css" media="all">

a.tombol {

border:0;

display: block;

width: 107px;

height: 31px;

background: url(tombolhover.jpg) no-repeat;

text-decoration: none;

}

a.tombol:hover {

background-position: 0 -31px;

}

</style>

</head>

<body>

<a href="http://www.dhimasronggobramantyo.com" class="tombol"></a>

</body>

</html>

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:

Komentar [27]

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?

Dikirim oleh doni pada 17 Februari 2008 05:40:49 WIB

bagus banget ! thank's ya

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

Dikirim oleh Surya - balikpapan pada 10 Maret 2008 12:13:48 WIB

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

form method=\"post\" action=\"http://www.dhimasronggobramantyo.com/artikel/Mengubah_gambar_pada_mouse_hover_dengan_menggunakan_CSS#bookmark\" class=\"form\"

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

Dikirim oleh lala termanise pada 21 April 2008 02:06:03 WIB

mas kalo misalnya mo bikin hover image yang banyak,,misal ampe 5 kategory caranya gmn?? trus aku juga pingin prrivat tentang css.. bisa enggak nd saratnya dan biayanya gimana????.... aku dah bikin website cuman kurang ngerti css n php..pls.... n kalo halamanku di buka agak berat apa katrena terlalu banyak pemakaian layer...kalo sempet coba deh buka ferdisain.co.nr ....email me at ferdianlalu2000@yahoo.com

Dikirim oleh lisna pada 21 April 2008 09:00:40 WIB

Myspace Insult Graphics

Dikirim oleh monyetganteng pada 07 Mei 2008 04:43:48 WIB

mas gimana klo di cobain di zendframework kok gak mempan...?

Dikirim oleh puntius jv pada 20 Mei 2008 01:39:57 WIB

gimana sih cara menginstall php versi 5.0.0, kasih tau cara nya...ya...mas...please....

Dikirim oleh Dhimas Ronggobramantyo pada 26 Mei 2008 07:55:51 WIB

@lala termanise
Baca disini:
http://www.dhimasronggobramantyo.com/artikel/Membuat_Horizontal_Menu_dengan_CSS,_Images_Sprites_dan_Animasi

Dikirim oleh ramdani pada 15 September 2008 04:36:07 WIB

oh ya mas nanya untuk form kenapa ya harus memakai CGI script,& apaan tu,lalu gimana cara mempraktekannya.trim, balas lewat email ya.

e mail saya:ramdani.romi@yaho.co.id

Dikirim oleh mukhlisimovic pada 29 Desember 2008 04:02:48 WIB

ada sofware untuk buat seperti tu ga??

Dikirim oleh risman pada 04 Februari 2009 06:03:25 WIB

gimana sih biar bgcolor table bisa berubah kalo pake a:hover

Dikirim oleh deden pada 24 Februari 2009 08:31:51 WIB

hebat

Dikirim oleh baq-_-paw pada 15 Maret 2009 07:18:24 WIB

kalo smisal kita gunain hover pada html bisa gag???

Dikirim oleh yna pada 26 Maret 2009 08:02:46 WIB

lagi searching cara ini, langsung dapet jawabannya disini. makasih bgt ya.. smile

utak-atik blog

Dikirim oleh AwamBoyz pada 06 April 2009 09:24:11 WIB

Duuh mazzzz makacih banyaknya... jadi ada pencerahan tu bagusi tugas kul Q...

Dikirim oleh toede pada 13 April 2009 03:16:23 WIB

Setelah mengobrak abrik paman Google, akhirnya dapet juga artikel yang kucari. Trims banget, Dhimas!
You're the best!!!

Dikirim oleh rakhmat pada 28 April 2009 03:39:22 WIB

wah......
mantab juga......
btw...
sblmnya....sy kan pake icon/img untk menunya..
nah, mas kalo sy ingin link seperti home, profile.....ts bisa berubah ukurannya menjadi lbh besar misal awal 44 x 44 dan begitu mouse diarahkan.......jadi 48 x 48.....
bisa gak??
thanks abist ( wong_indos@yahoo.co.id)

Dikirim oleh rakhmat pada 28 April 2009 03:39:41 WIB

Dikirim oleh rakhmat pada 28 April 2009 03:40:38 WIB

Dikirim oleh rakhmat pada 28 April 2009 03:40:54 WIB

Dikirim oleh lucky-boy pada 12 Juni 2009 02:09:51 WIB

wah bagus banget nie artikel

moga z, smakin banyak orang" yang mw berbagi ky maz..

thanks ya MAz,

oea klo bisa, ajarin juga dunk bgaimna membuat button-nya

misalnya bikin di photoshop (ya ky tutorialx gtu)^^

yup, Sukses slalu yah

Dikirim oleh saeful pada 19 Juli 2009 02:09:44 WIB

saya sangat tidak mengerti mengenai php dan membuat menu pesan tolong dong gimana cara membuat itu semua

Dikirim oleh Aswan pada 02 September 2009 07:14:37 WIB

lumayan

Dikirim oleh eeetana pada 02 September 2009 07:15:21 WIB

lumayan

Dikirim oleh ahmad yusuf pada 18 November 2009 09:45:29 WIB

bagus banget ni artikel,semoga bermanfaat ya untuk kalian semua yang membuka.
aq,msih bingung cara memasukakn websit dari dramwever ke internet supaya konek.
kasih tau ya....

Dikirim oleh elstc pada 21 November 2009 09:35:37 WIB

kalau dgn dua gambar atau lebih... gmna tuch mas script programnya...????

Kembali keatas

Kirim Komentar:

Siapakah Saya?

Saya hanyalah orang yang senang dengan segala sesuatu yang berhubungan dengan website dan internet dan ingin agar semua orang se-Indonesia Raya juga menyukainya.

Saya sudah tidak pernah mengecek & mengupdate website ini, jadi apabila ingin komentar, tanya atau apa saja silahkan hubungi saya melalui:
Facebook: Cari nama saya, Dhimas Ronggobramantyo
Twitter: Cari user, plentong, bahasa Inggris ya
Email: ronggobramantyo@gmail.com

Hubungi Saya

CSS (Cascading Stylesheet) - Mengubah gambar pada mouse hover dengan menggunakan CSS

Artikel CSS (Cascading Stylesheet)