Une technique fabuleuse : les CSS sprites

[davidm]

L'excellentissime pompage.net nous offre une excellente traduction de l'article de Dave Shea sur les CSS Sprites.

Quel intérêt ?

Créer des menus compatibles quelque soit les navigateurs, accéler les temps de chargement et pouvoir créer des images mappées sans le moindre javascript, avec une liberté totale

Autant vous dire que je ne vais pas tarder à jouer avec cette technique, qui demande de la rigueur mais qui est très puissante.

Comme un dessin vaut mieux qu'on long discours, j'en profite pour vous donner l'adresse d'un deuxième exemple qui n'est pas sur pompage :

http://www.alistapart.com/d/sprites/ala-blobs2.html

L'image qui a servi à créer le map :

http://www.alistapart.com/d/sprites/blobs.gif

Modifié 22 Avril 2005 par davidm

[AntoineViau]

Pose des problèmes dans IE si l'on a pas un accès direct aux config. Apache.

Y a une sombre histoire de cache qui fait que parfois (souvent) l'effet roll-over met une plombe s'afficher... Et l'utilisateur ne comprend plus rien.

Antoine

[Hells_Dark]

Tu as mis le même lien pour l'image et le résultat

Et tu as mis la mauvais image en résultat

Ca : 'est le bon résultat : http://pompage.net/IMG/html/sprites/ala-blobs2.html

Et ça l'image de base :

http://pompage.net/IMG/gif/blobs.gif

[davidm]

Oui hells dark, c'est parceque sur alistapart, il y a une étape en plus détaillée. Sinon Antoine, je ne vois pas à quoi tu fais référence, il faut que je vérifie mais je ne vois pas en quoi le fait de preloader une image via CSS peut poser de problème autre que l'interprétation de la CSS par IE.

LEs réglages Apache s'appliquent à tous les navigateurs, on est au niveau serveur là... Je vais vérifier ça en tout cas. Un peu naze, là, hier j'étais au Sénat pour la conférence international sur les blogs...

[Mamat]

Ha oui je l'utilise dans deux de mes sites... combiné avec un text-repalcement c'est du plus bel effet ;oD