Limite de la technique des "Sprites"

**Dionyzos** · 30/08/2007, 16h24

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 :

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

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 :

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
 
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 :

et maintenant le CSS avec la technique des "sprites"...

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
 
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 :

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.

**Dionyzos** · 30/08/2007, 17h17

Finalement après un gros "Brain Storming" avec moi-même, j'ai trouvé la solution à mon exemple d'icônes devant des liens.

En fait c'est super con : au lieu de faire une images horizontale avec les icones alignées de gauche à droite, je fais une image verticale avec les icônes empilées de haut en bas

T'ain, ch'uis l'meilleur !

Mais merci de votre aide !

**MasterOfChakhaL** · 30/08/2007, 21h24

Salut,

Pour aller encore plus loin, tu peux faire un gif 1000x1000px et placer tes icones au 4 coins (le reste est transparent).
Ca alourdit l'image, mais pas de beaucoup.

A quoi ca sert?
Ca évite, quand l'utilisateur utilise la fonction de zoom (ctrl+molette sur la plupart des navigateurs), d'afficher toutes les icones dans chaque bouton.
Ne me demande pas comment je ferais s'il devait y avoir 5 icones

on peut vraiment faire des trucs sympas avec la techique des sprites.
par exemple (attention, autopromo inside)
http://css.developpez.com/galerie/?p...s-fantaisistes