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