En explorant les onglets du site officiel de Mootools, j'ai découvert cet astucieux petit trick CSS. Il permet de mettre en place un effet de "rollover" (changement d'image au passage du curseur de la souris) en utilisant une seule image source pour les différents états possibles (inactif/actif/survolé). Il s'agit en réalité d'une image composée des 3 états de l'onglet disposés l'un au dessus de l'autre. L'astuce consiste alors à afficher cette image en arrière-plan de l'onglet, et de la faire coulisser verticalement en CSS via la propriété background-position pour ne faire apparaître que l'état souhaité. Fallait y penser !

ul#menu li a {
    background-image: url(tab.gif);
    background-repeat: no-repeat;
    background-position: center left;
}
ul#menu li a:hover {
    background-position: top left;
}
ul#menu li a.selected, ul#menu li a:active {
    background-position: bottom left;
}

Liens utiles

• Exemple d'onglets avec une seule image
• Ebauche du jeu GTA en Javascript avec jQuery

Réagir à cet article | Lire la suite >>>