Limite de la technique des "Sprites"
Bonjour,
J'utilise depuis peu la méthode dites des "sprites" pour faire mes images de menu ou de boutons, afin de réduire le nombre de requêtes HTTP.
Ca marche plutôt pas mal, seul hic, c'est dans certains cas où cette méthode ne fonctionne pas.
Par exemple dans le cas de liens précédés d'une icône, dont le code HTML est...
Code:
1
2
3
4
5
|
<a id="lien1" href="page1.htm">page 1</a>
<a id="lien2" href="page2.htm">page 2</a>
<a id="lien3" href="page3.htm">page 3</a>
<a id="lien4" href="page4.htm">page 4</a> |
...et le code CSS sans la technique des "sprites" est...
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
A {
display: block;
float: left;
background-color: #fcc;
background-repeat: no-repeat;
background-position: left center;
width: 70px;
height: 16px;
border: 1px red solid;
margin: 2px 2px;
font-size: 12px;
text-align: right;
padding-right: 5px;
}
#lien1 { background-image: url(icone1.gif); }
#lien2 { background-image: url(icone2.gif); }
#lien3 { background-image: url(icone3.gif); }
#lien4 { background-image: url(icone4.gif); } |
en partant du principe que toutes les icones font 17x16 pixels.
on obtient le résultat suivant :
http://www.imagup.info/images/04/118..._screen_ok.gif
et maintenant le CSS avec la technique des "sprites"...
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
A {
display: block;
float: left;
background: #fcc url(icones.gif) no-repeat scroll left center;
width: 70px;
height: 16px;
border: 1px red solid;
margin: 2px 2px;
font-size: 12px;
text-align: right;
padding-right: 5px;
}
#lien1 { background-position: 0px; }
#lien2 { background-position: -17px; }
#lien3 { background-position: -34px; }
#lien4 { background-position: -51px; } |
dans ce cas les 4 icônes sont assemblés dans une images unique 'icones.gif' dont les dimensions sont 68x16 pixels.
et voici le résulta obtenu :
http://www.imagup.info/images/04/118..._screen_ko.gif
On voit tout de suite le problème :?
Si qq'un à une vague idée sur la solution je suis preneur :)
Merci.
PS: Je précise que la méthode qui consiste à ajouter dans le code HTML une balise <IMG> devant chaque lien, ne me convient pas dans la mesure où je ne veux pas surcharger inutilement le code HTML.
