CSS : Mouse Over with Image Background

setelah disodorin dengan template layout menggunakan photoshop, tentu gampang ditebak button kali ini menggunakan gambar.disitu terpampang 4 button yang masing-masing akan disambungkan dengan halaman HTML lain.sebagai situs restauran, buttonnya juga memiliki icon dengan setiap gambar sebagai penampilnya.

sepertinya akan mudah untuk mengeditnya 🙂

tapi permintaan tentu harus lebih banyak dari sekedar mengubah ke HTML :D.

setiap button yang muncul mesti berubah setiap mouse melewatinya (on mouse over). masih inget kan kalo untuk memberikan background warna di button di CSS dapat menggunakan ;

a:hover{color:black;background:peach url(image url)}

tag ini hanya berlaku kepada semua button yang aktif, bagaimana bila ingin setiap button bersifat unique? artinya setiap button memiliki over button yang berbeda beda….ini ada triknya :

a img {height: 42px; width: 99px; border-width: 0; background: top left no-repeat;}

a#satu img {background-image: url(images/menu3.gif);}
a#dua img {background-image: url(images/menu2.gif);}
a#tiga img {background-image: url(images/menu1.gif);}
a#empat img {background-image: url(images/menu4.gif);}

a#satu:visited img {background-image: url(images/menu3visited.gif);}
a#dua:visited img {background-image: url(images/menu2visited.gif);}
a#tiga:visited img {background-image: url(images/menu1visited.gif);}
a#empat:visited img {background-image: url(images/menu4visited.gif);}

a#satu:hover img {background-image: url(images/menu3over.gif);}
a#dua:hover img {background-image: url(images/menu2over.gif);}
a#tiga:hover img {background-image: url(images/menu1over.gif);}
a#empat:hover img {background-image: url(images/menu4over.gif);}

a#satu:active img {background-image: url(images/menu3active.gif);}
a#dua:active img {background-image: url(images/menu2active.gif);}
a#tiga:active img {background-image: url(images/menu1active.gif);}
a#empat:active img {background-image: url(images/menu4active.gif);}

perhatikan pada a img {height: 42px; width: 99px;….ukuran width dan heightnya harus disesuaikan dengan button yang ada, untuk itu pastikan ukuran tinggi dan lebar masing2 button harus sama.

dan di HTML pada buttonya, kasih style idnya, misalnya /a href=”kesana.html” id=”satu”/, maka button tersebut akan tunduk pada CSS yang telah ditentukan sebelumnya.

untuk contoh bisa buka disini

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s