Tu peux faire ainsi par exemple:
dans ton css de .boutons, tu mets tout ce qui est commun à tes boutons, soit un display:bloc, la largeur hauteur, l'image de fond, l'habillage du texte, les actions sur ton image,...Code:<a href="#" id="bouton0" class="boutons">Prestations<img src="imgaafficherenbas.jpg" alt=" "></a>
dans ton #bouton0, #bouton1,... tu vas mettre juste ce qui est utile au bon positionnement de ton bouton (en évitant un positionnement absolu pour éviter que les images n'aient toutes des coordonnées différentes).
Soit quelque chose du genre:
Bien sûr mes chiffres sont arbitraires, à toi de positionner le tout correctement en gardant à l'esprit qu'il faut choisir correctement le point de référence pour l'affichage de tes images en bas. Tu peux par exemple mettre le tout dans une liste que tu positionnerais, elle, en absolu et qui servirait aussi de référence pour le positionnement de tes images.Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 a.boutons { display:block; width:200px; height:20px; background: url(bouton-off.gif) no-repeat left center; padding-left:25px; text-decoration:none; color:#000; } a.boutons img { width:0; height:0; border-width:0; } a.boutons:hover { background: url(bouton-on.gif) no-repeat left center; border:none; /* border ajouté cause bug IE */ } a.boutons:hover img { position:absolute; top: 420px; left:620px; width:120px; height:120px; }