Comment créer une image qui change d'état?

Question

Quelle est la meilleure façon de créer une image HTML qui affiche divers états (par exemple pour un bouton: normal, plané, sélectionné, désactivé)? Idéalement, je veux faire via les classes CSS (y compris la méta-classe :hover).

Aussi, je l'ai vu plusieurs états combinés en une seule image (ce qui rend l'image pré-chargement plus facile), mais je ne sais pas comment afficher une seule tranche de l'image au besoin.

Merci!

Answer 1

Je suppose que vous parlez de sprites CSS. Voici un article A List Apart pour vous aider à démarrer: http://www.alistapart.com/articles/sprites. L'idée de base est que toutes vos images sont combinées en une seule grande image.

Alors que normalement vous aurez img étiquettes ou petits éléments avec l'image de fond appliquée, vous avez maintenant l'image unique appliquée à plusieurs éléments comme image de fond, et chacun d'eux a différentes valeurs de position de fond pour positionner l'image correcte . Un exemple de ceci serait les icônes de jQuery UI - l'apparence d'une seule image combinée comme ceci:

Ensuite, chacune des icônes individuelles partagent une seule classe, avec un ensemble backgroun-image:

.ui-icon{width:16px;height:16px;background-image:url(../images/ui-icons_808080_256x240.png);} 

en plus background-position personne pour chacune des différentes icônes:

.ui-icon-carat-1-n{background-position:0 0;} 
.ui-icon-carat-1-ne{background-position:-16px 0;} 
.ui-icon-carat-1-e{background-position:-32px 0;} 
.ui-icon-carat-1-se{background-position:-48px 0;} 

La même chose peut être fait pour e e états interactifs individuels: modifiez la position de fond de l'élément sur :hover et vous obtenez une couleur ou une icône différente.

Answer 2

Check this out: http://josefaeti.com/tutorials/css/css-how-to-use-multiple-images-stored-in-a-single-file.html#box-0

et ceci: http://www.alistapart.com/articles/sprites