Discussion :

[dominos]

Bonjour,

Ces derniers temps, je voix souvent des sites qui ont à la place d'une image d'un bouton, une suite de boutons regroupés dans une image, je me pose donc la question : Comment ça fonctionne ? A première vue ça semble interressant et utile puisque ça permet de precharger toutes images en un seul block.

Savez-vous comment celà fonctionne, est-ce que c'est simplement le fait de définir les propriétés top/left de background ?

Exemple:


Merci d'avance.

[ornitho13]

ces images sont utilisées pour styler un bouton (par exemple) et sont appelées des sprites (ensemble d'images regroupées dans une seule).

Ainsi pour les utiliser dans le CSS, on déclare une fois l'image et ensuite on change la position de l'image selon l'état ou le type de bouton voulu.
Exemple :
J'utilise une partie de l'image pour mon bouton (le bouton a un fond bleu et une bordure bleue - en prenant l'exemple de l'image que tu as fournit ):

Code css :

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

1
2
3
4
5
6
 
.monBoutonBleu{
    width:200px;
    height:50px;
    background: url(monimage.png) no-repeat 0px 0px;
}

Sur un hover je décale l'image vers le haut pour avoir le bouton (fond blanc et bordure bleue) :

Code css :

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

1
2
3
4
 
.monBoutonBleu:hover{
    background-position:0px -50px;
}

[dominos]

Merci,

Est-ce que cette technique crée des scintillements lors du changement de la classe, si les paramètres left/top/height/width changent ?

Est-ce vraiment plus fluide du fait que l'image globale est déja chargée ?

[ornitho13]

non cela ne crée pas de scintillement (sauf peut être sous IE6 mais il y a une option dans les paramètres, à décocher il me semble).

L'intérêt est de charger l'image et donc de ne gérer que la position, donc oui ça peut être plus fluide, après tout dépend de la taille de l’image.
Je dirais qu'il faut utiliser les sprites avec parcimonie (pour les boutons par exemples).

[dominos]

Hum j'y vois plus clair... merci pour ces infos.