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