Ressources utiles pour les webmestres
31 mars 2011
Achat de liens pour la fête des mères : Google ne fait pas de cadeau !
11 mai 2011
Afficher tout

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.

Roll Over CSS - Image 1 Roll Over CSS - Image 2

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.

Roll Over CSS - Images combinées

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 (article sur W3schools).

Merci de partager à vos contactsShare on FacebookTweet about this on TwitterShare on LinkedInEmail this to someone
Frédéric Potvin
Frédéric Potvin
Frédéric Potvin Spécialiste en technologies web et en gestion de projets de développement de visibilité web.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *