Tu peux faire ainsi par exemple:
<a href="#" id="bouton0" class="boutons">Prestations<img src="imgaafficherenbas.jpg" alt=" "></a>
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,...
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:
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;
} |
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.
Partager