Programmer une image “roll-over” en CSS.

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). Les images ci-dessous ont une hauteur de 68 pixels et une largeur de 74 pixels.

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 mais, dans cet exemple,  j’ai choisi de le coller de gauche à droite.

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! Voici le résultat!

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.