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 :)

Configuration: Windows Vista
Firefox 3.0.5