Programmer une image « roll-over » en CSS

Publié le 27 avril 2011 sur www.affluences.ca

Récemment nous avons travaillé une page de notre site et nous y avons ajouté des images « roll-over ». J’ai fait quelques recherches pour activer l’image en CSS. Les avantages de cette méthode sont la vitesse d’exécution et la facilité de programmation.

Voici comment procéder…

Création des images

Commencez par créer vos images. Elles doivent avoir les mêmes dimensions (hauteur et largeur).

Fusion des images

Ensuite il faut « fusionner » les images. On doit les coller l’une à l’autre. Vous pouvez coller n’importe quel côté ensemble.

Programmation de l’élément (html/css)

Ensuite il faut créer un élément générique vide, comme un div ou un span, et lui appliquer ces règles CSS :

La hauteur et la largeur spécifiées doivent correspondre à celles des images originales. Display: block; s’assure que votre élément gardera la bonne dimension peu importe quel est  l’élément HTML utilisé. Vous pouvez le remplacer par display: inline-block; pour l’afficher en ligne.

    .menu_item {
        background: none no-repeat scroll 0 0 transparent;
        display: block;
        height: 68px;
        width: 74px;
    }

C’est avec la règle :hover que la magie apparaît. On déplace simplement l’image vers la gauche. On utilise une seule image, peu importe son état, pour éviter le temps de chargement de d’autres images.

    menu_item:hover {
        background: none no-repeat scroll -74px 0 transparent;
    }

Ensuite on applique l’image à l’élément.

    .link_1 {
        background-image: url("images/images-combinés.png");
    }

Conclusion

C’est tout!

Vous pouvez ajouter autant d’états et d’images que vous désirez.

Pour déplacer une image de fond vous pouvez utiliser la propriété background-position (article sur W3schools).