Sprites CSS : toujours que la première image qui s'affiche
Bonjour,
Je voulais créer les boutons qui switchent dans une même image en utilisant les "sprites CSS", ça pose un problème chez moi, c'est-à-dire que j'ai préparé une image 360 x 120 px (en sachant que 60px pour chacune à afficher), il y a 6 images sur une ligne, donc 12 sur les lignes pour les switcher avec les %, je n'ai toujours que la première image qui se montre !!! pour le survol, c'est bon, mais c'est la première image qui ne se décale pas ! Comment ça se fait ?
voici le code html:
Code:
1 2 3 4 5 6 7 8
| <ul class="icone">
<li class="icone1"></li>
<li class="icone2"></li>
<li class="icone3"></li>
<li class="icone4"></li>
<li class="icone5"></li>
<li class="icone6"></li>
</ul> |
et le CSS:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .icone li {width: 60px; height: 60px; display: inline-block; background: url("sprite.png") no-repeat;}
.icone1 {background-position: left top;}
.icone1:hover {background-position: left bottom;}
.icone2 {background-position: 20% top;}
.icone2:hover {background-position: 20% bottom;}
.icone3 {background-position: 40% top;}
.icone3:hover {background-position: 40% bottom;}
.icone4 {background-position: 60% top;}
.icone4:hover {background-position: 60% bottom;}
.icone5 {background-position: 80% top;}
.icone5:hover {background-position: 80% bottom;}
.icone6 {background-position: right top;}
.icone6:hover {background-position: right bottom;} |