11-09-2008, 02:35 PM
En fait, c'est bien plus simple que ça.
A chaque déclinaison de tuile correspond une classe CSS.
Plutôt que d'avoir une image par déclinaison de ma tuile (ici cloud1, cloud2, cloud3), je fais une seule image contenant toutes les déclinaisons.
Ensuite, au lieu de faire un background : url('cloud1.png');, je fais un background : url('clouds.png') 0 200px;. Le bloc (un div, en l'occurrence) va alors prendre pour image de fond l'image clouds.png, dont le point de coordonnées 0, 200 sera attaché au point de coordonnées 0,0 de mon bloc (le div en question).
N'hésite pas à me dire si je ne suis pas clair.
Quelques articles complémentaires sur l'utilisations de Sprites CSS :
Sephi-Chan
A chaque déclinaison de tuile correspond une classe CSS.
Plutôt que d'avoir une image par déclinaison de ma tuile (ici cloud1, cloud2, cloud3), je fais une seule image contenant toutes les déclinaisons.
Ensuite, au lieu de faire un background : url('cloud1.png');, je fais un background : url('clouds.png') 0 200px;. Le bloc (un div, en l'occurrence) va alors prendre pour image de fond l'image clouds.png, dont le point de coordonnées 0, 200 sera attaché au point de coordonnées 0,0 de mon bloc (le div en question).
N'hésite pas à me dire si je ne suis pas clair.
Quelques articles complémentaires sur l'utilisations de Sprites CSS :
- Pompage - Sprites CSS : Meurs, découpe d’images, meurs !
- Website Optimization - CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
- CSS Tricks - CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Sephi-Chan