Code CSS changement de bouton au survol

Bonjour,
Je suis en train de créer les pages HTML de mon futur site.
J'ai fais un petit menu en haut avec des boutons en .jpg à la suite les uns les autres...

Celà ressemble à ça :


Mon CSS :

<style>
/* ici le menu de gauche */
.cadredumenugauche {
float:left;
text-align:left;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
width: 150px;
padding:10px;
background-color:#c2c0c0;
border:1px solid #000000; color:#666666;
}
</style>


<div
style="font-weight: bold; margin-top: 5px; height: 45px; margin-right: 25px; margin-left: 0px; width: 925px; text-align: center;"
class="cadredumenugauche">
<img style="width: 135px; height: 40px;" alt=""
src="http://www.jmr-whole.com/im/bouton/bouton1.jpg"><img
style="width: 135px; height: 40px;" alt=""
src="http://www.jmr-whole.com/im/bouton/bouton2.jpg"><img
style="width: 100px; height: 40px;" alt=""
src="http://www.jmr-whole.com/im/bouton/bouton3.jpg"><img
style="width: 120px; height: 40px;" alt=""
src="http://www.jmr-whole.com/im/bouton/bouton4.jpg"><img
style="width: 135px; height: 40px;" alt=""
src="http://www.jmr-whole.com/im/bouton/bouton5.jpg"><img
style="width: 135px; height: 40px;" alt=""
src="http://www.jmr-whole.com/im/bouton/bouton6.jpg"><img
style="width: 100px; height: 40px;" alt=""
src="http://www.jmr-whole.com/im/bouton/bouton7.jpg"></div>


Ce que je voudrais, c'est qu'au survol de la souris, les boutons changent de couleurs
Pour celà, j'ai créé des autres fichiers images :
Même URL mais "bouton1_bis.jpg" , bouton2_bis.jpg

En cherchant la solution à mon problème, je suis tombé là dessus :

a { /* Ici le bouton normal * /
display:block;
background:url("adressedetonimage") 0 0 no-repeat;
text-decoration: none;
}

a:hover { */ Ici le bouton a afficher lors du survol */
background:url("adressedetonimage") 0 0 no-repeat;
}


Mais je ne sais :
Ni comment m'en servir,
Ni où le placer dans ma page index.html
J'y connais rien en CSS aussi =)
J'ai recopié un code pour créer mes cadres/menus

D'avance merci :)