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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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;}