Jojo m'avait demandé une petite explication sur l'intégration CSS de mon dernier skin... que les gourous m'excusent si je ne précise pas tout dans le moindre détail, mais l'idée est bien d'expliquer un principe et une logique, et pas la construction intégrale du graphisme de mon site.

Jojo, tu suis maintenant ! :)

Petite explication historique de cette technique : revenons en arrière il y a... 8 à 10 ans. Les effets de rollover, ou "images survolées" en français se faisaient ainsi :

<a href="" title="" onmouseover="">une image</a>

Quand la souris passait au-dessus de l'image, ça appelait un javascript qui s'occupait de charger une autre image à la place.

Principaux défauts de cette technique : si on désactive javascript... adieu le rollover, et si l'internaute navigue par exemple au clavier... la souris ne risque pas de passer au-dessus de l'image pour déclencher l'effet. Et je ne parle même pas de la lourdeur du code, de la non-séparation présentation/structure... bref, c'était pas terrible.

L'idée est donc venue avec l'arrivée des CSS : puisque cet effet est plutôt de l'ordre de la présentation, autant le gérer dans le fichier qui est prévu... pour la présentation ! La feuille de style donc.

#id_du_lien{
background:url("fichier.jpg") no-repeat;
background-position:0 0;
}
/** on met donc en fond l'image du lien **/
#id_du_lien:hover,
#id_du_lien:active,
#id_du_lien:focus{
background:url("fichier_roll.jpg") no-repeat;
background-position:0 0;
}

Là, c'était déjà mieux, on utilisait une propriété en quelque sorte plus naturelle, la présentation était séparée du code du lien, et en prime on pouvait cibler plusieurs comportements : survolé (hover), focus, etc.

Seul défaut de cette technique, certains navigateurs ne préchargeaient pas le fichier de l'image survolée, d'où un clignotement désagréable lors du premier survol, le seul moyen était de recourir à un préchargement via Javascript... inefficace si ce dernier est désactivé. Mieux, mais pas encore ça !

On arrive donc à une meilleure technique : l'image du lien et l'image du rollover sont dans le même fichier image (l'une au-dessus de l'autre par exemple). On s'arrange pour ne voir que le haut de l'image qui contient le lien non survolé, et quand on le survole, on décale l'image du fond.

#id_du_lien{
background:url("fichier_final.jpg") no-repeat;
background-position:0 0;
}
/** supposons l'image haute de 50 px **/
#id_du_lien:hover,
#id_du_lien:active,
#id_du_lien:focus{
background-position:0 -50px;
}

L'illusion est parfaite, l'image est déjà chargée, on ne fait que la décaler de 50 pixels, ce qui est immédiat. Plus besoin de Javascript obstructif, le tout fonctionne sans !

Cherchons encore la petite bête... cela fait dans le cas de mon site pas moins de 10 fichiers à créer rien que pour la navigation de mon bandeau... si j'en crois les apôtres des performances des sites internet que sont les extensions Page Speed et Yslow, c'est pas encore parfait, car il faut minimiser le nombre de fichiers.

Donc l'idée est de pousser le concept de grouper les images au maximum (enfin, il faut que cela reste dans les limites du bon sens). Prenons l'image de mes liens de bandeau.

Comme tu peux le voir Jojo (tu suis ?), elle contient toutes les images des liens, et toutes les images des rollovers. Reste plus qu'à les positionner avec style (si j'ose dire) via la CSS, chaque lien affichant la même image de fond... mais décalée juste comme il faut pour donner l'illusion.

/** tous les liens = même image de fond **/
#menugauche li a{
background:url("bandeau.jpg") no-repeat;
}
/** décalage pour le lien CV **/
#menugauche .cv{
background-position:2px 0;
}
/** la version survolée utilise le même principe, 
mais décalée de 52 px en vertical 
=  elle est en-dessous **/
#menugauche .cv:hover,
#menugauche .cv:active,
#menugauche .cv:focus{
background-position:2px -52px;
}

Ainsi, on a une unique image pour tous les liens. Les titres de pages utilisent le même principe. Ainsi, je groupe pas moins de 24 images... dans 2 fichiers images.

La totalité du graphisme du dernier skin est chargée via CSS avec 6 images seulement. Je pourrais encore réduire ce nombre en groupant l'entête et le pied de page... mais le fichier résultant serait assez lourd, et le bénéfice serait très relatif.

Voilà pour l'explication du schimili... schilimi... du schmilblick !