Technique de Rollover avec deux Images
Objectifs
Les objectifs de cette vidéo sont :
- Apprendre à créer des effets de rollover avec des images en CSS.
- Comprendre les limitations de préchargement d'images avec CSS.
- Utiliser Dreamweaver pour configurer les propriétés et les styles CSS nécessaires.
- Optimiser l'expérience utilisateur en évitant les délais de chargement d'images.
Résumé
Cette leçon vous apprendra à intégrer un effet de rollover utilisant des images dans un menu CSS avec Dreamweaver.
Description
Après avoir créé un menu avec du texte uniquement, nous aborderons la réalisation d'un menu avec un effet de rollover incluant des images. Lorsque le pointeur de la souris survolera le texte du menu, l'arrière-plan changera d'aspect, grâce à une image spécifique.
Nous discuterons des limitations du CSS en matière de préchargement d'images et proposerons une solution en utilisant une seule image comportant les deux états visuels (inactif et actif). Pour ce faire, nous configurerons les propriétés display et float dans CSS pour obtenir l'effet souhaité. Ensuite, nous appliquerons la règle background-position pour gérer le changement visuel lors du rollover.
Cette leçon pratique inclut des étapes détaillées sur l'utilisation de Dreamweaver pour modifier les propriétés de style et appliquer les images, garantissant ainsi une bonne compréhension et une application efficace des concepts appris.
Questions fréquentes
float: left et display: block sont utilisées pour modifier l'agencement des éléments du menu en horizontal.
line-height avec une valeur égale à la hauteur du bouton pour centrer verticalement le texte.
Programme détaillé
Module 1 - Introduction
Module 2 - Découverte
Module 3 - Créer des pages
Module 4 - Réaliser des pages
Module 5 - Les spécialités de Dreamweaver
