Discussion :

[bouchra19]

Bonjour,
J'aimerais savoir comment on peut gérer plusieurs boutons qui se trouvent dans une même image png comme l'illustre la pièce jointe

EN fait, j'ai vu le code css de ces boutons, mais je l'ai pas compris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*************************
<BUTTON> TAG
/****************************/
/* <hc:Button /> */
button.btn {  font-family: Arial; background-position: -10000px -10000px; cursor:pointer; background-color: transparent;  border: none; margin: 0; padding: 0; }
button.btn:hover {  background-position: -10000px -10000px; }
button.btn div { 	display: block; cursor:pointer;  border: 0; cursor: pointer;  background-image: url("../images/global/buttons.png");  background-repeat: no-repeat; text-align: center; }
button.btn div span { display: block; cursor:pointer; display: block;  white-space: nowrap; font-weight:bold;  background-image: url("../images/global/buttons.png"); background-repeat: no-repeat; color: #fff; }
 
 
		/* button browser specific tweaks */
		.ie button.btn { width: auto; overflow: visible;  }
 
 
 
.btn35Blue, .btn35Black, .btn35Orange, .btn22Blue, .btn22Black, .btn22Orange,
.btn35Blue span, .btn35Black span, .btn35Orange span, .btn22Blue span, .btn22Black span , .btn22Orange span{background-image:url("../images/global/buttons.png");background-repeat:no-repeat;text-decoration:none;display:inline-block;font-weight:bold;color:#fff;}
.btn35Blue, .btn35Black, .btn35Orange, button.btn35Blue div, button.btn35Orange div , button.btn35Black div {padding-right:20px;}
.btn35Blue span, .btn35Black span, .btn35Orange span, button.btn35Blue div span, button.btn35Orange div span, button.btn35Black div span {padding-left:15px;}
.btn22Blue, .btn22Black, .btn22Orange, button.btn22Blue div, button.btn22Orange div , button.btn22Black div {padding-right:15px;}
.btn22Blue span, .btn22Black span, .btn22Orange span, button.btn22Blue div span, button.btn22Orange div span, button.btn22Black div span{padding-left:10px;}
.btn35Blue, .btn35Black, .btn35Orange, .btn35Blue span, .btn35Black span, .btn35Orange span, button.btn35Blue div, button.btn35Orange div , button.btn35Black div{line-height:30px;height:35px;font-size:13px;}
.btn22Blue, .btn22Black, .btn22Orange, .btn22Blue span, .btn22Black span, .btn22Orange span, button.btn22Blue div, button.btn22Orange div , button.btn22Black div{line-height:19px;height:22px;font-size:11px;}
.btn35Blue, button.btn35Blue div{background-position:100% -35px;}
.btn35Blue span, button.btn35Blue div span{background-position:0 0;}
.btn35Blue:hover, button.btn35Blue:hover div{background-position:100% -105px;}
.btn35Blue:hover span, button.btn35Blue:hover div span{background-position:0 -70px;}
.btn35Black, button.btn35Black div{background-position:100% -175px;}
.btn35Black span, button.btn35Black div span {background-position:0 -140px;}
.btn35Black:hover, button.btn35Black:hover div{background-position:100% -245px;}
.btn35Black:hover span, button.btn35Black:hover div span {background-position:0 -210px;}
.btn35Orange{background-position:100% -105px;}
.btn35Orange span{background-position:0 -70px;}
.btn35Orange:hover{background-position:100% -175px;}
.btn35Orange:hover span{background-position:0 -140px;}
.btn22Blue{background-position:100% -302px;}
.btn22Blue span{background-position:0 -280px;}
.btn22Blue:hover{background-position:100% -346px;}
.btn22Blue:hover span{background-position:0 -324px;}
.btn22Black{background-position:100% -390px;}
.btn22Black span{background-position:0 -368px;}
.btn22Black:hover{background-position:100% -434px;}
.btn22Black:hover span{background-position:0 -412px;}
.btn22Orange{background-position:100% -346px;}
.btn22Orange span{background-position:0 -324px;}
.btn22Orange:hover{background-position:100% -390px;}
.btn22Orange:hover span{background-position:0 -368px;}

Moi ce que je veux comprendre est comment peut-on afficher un seul bouton parmi tous ces boutons qui se trouvent dans la même image?

Et MERCI d'avance pour votre aide

[Bovino]

Il s'agit de la méthode utilisant les sprites CSS.

[bouchra19]

Merci beaucoup Bovino
c'est ça ce que je cherchais

Dans le document original les boutons s'affichent très bien
mais je ne sais pas pourquoi on m'affiche un peu de vide entre le bouton et son coin droit, pourtant j'ai rien changé dans le code css