Vidéo: Comment changer la couleur d'un texte, d'un titre ou d'un lien ? 2024
Les survols sont une fonctionnalité si populaire que Dreamweaver inclut une boîte de dialogue spéciale pour les survols: la boîte de dialogue Insérer une image survolée. Les images de survol, comme leur nom l'indique, sont conçues pour réagir lorsque quelqu'un place un curseur sur une image. L'effet peut être aussi dramatique qu'une image d'un chien étant remplacée par une image d'un lion, ou aussi subtile que la couleur d'un mot changeant.
Vous pouvez créer des effets d'image de survol plus complexes avec l'option Échanger l'image du panneau Comportements. L'option Permuter l'image vous permet de changer plusieurs images en même temps.
Pour créer un effet de survol simple avec deux images à l'aide de la boîte de dialogue Insérer un survol d'image de Dreamweaver, procédez comme suit:
-
Placez votre curseur sur la page sur laquelle vous souhaitez afficher le survol.
Les effets de survol nécessitent au moins deux images: une pour l'état initial et une pour l'état de survol. Vous pouvez utiliser deux images différentes ou deux similaires, mais les deux doivent avoir les mêmes dimensions. Sinon, vous voyez des effets de mise à l'échelle étranges car les deux images doivent être affichées exactement dans le même espace sur la page.
-
Choisissez Insérer → Image → Image survolée.
Vous pouvez également utiliser la liste déroulante disponible à partir de l'icône Images du panneau Insertion commune et sélectionner Image survolée.
La boîte de dialogue Insérer une image survolée apparaît.
-
Dans la zone Nom de l'image, nommez votre image.
Avant de pouvoir appliquer un comportement à un élément, tel qu'une image, l'élément doit avoir un nom afin que le script de comportement puisse le référencer. Vous pouvez nommer les éléments de votre choix tant que vous n'utilisez pas d'espaces ou de caractères spéciaux.
-
Dans la zone Image d'origine, spécifiez la première image que vous voulez voir. Utilisez le bouton Parcourir pour localiser et sélectionner l'image.
Si les images ne se trouvent pas déjà dans votre dossier de site local, Dreamweaver les copie dans votre site lorsque vous créez le survol.
-
Dans la zone Image survolée, entrez l'image que vous souhaitez rendre visible lorsqu'un visiteur place le curseur sur la première image.
Encore une fois, vous pouvez utiliser le bouton Parcourir pour localiser et sélectionner l'image.
-
Cochez la case Précharger l'image survolée pour charger toutes les images de survol dans le cache du navigateur lors du premier chargement de la page.
Si vous ne choisissez pas d'effectuer cette étape, vos visiteurs peuvent rencontrer un retard car la deuxième image ne sera pas téléchargée tant que le curseur ne sera pas déplacé sur l'image d'origine.
-
Dans le champ Autre texte, entrez une description des images.
Le texte alternatif est facultatif mais recommandé car l'utilisation de mots clés peut améliorer l'optimisation des moteurs de recherche.De même, le texte alternatif est un élément clé de l'accessibilité du Web car ce texte est lu à haute voix par des navigateurs spéciaux appelés lecteurs d'écran, qui sont utilisés par les personnes aveugles et celles dont la vue ou la mobilité est limitée. Le texte alternatif est affiché uniquement dans le navigateur si les images ne sont pas visibles.
-
Dans la zone Lorsque cliqué, allez à l'URL, entrez une adresse Web ou naviguez pour rechercher une autre page de votre site vers laquelle vous souhaitez créer un lien.
Si vous ne spécifiez pas d'URL, Dreamweaver insère automatiquement le signe # comme espace réservé dans le code.
Le signe # est une technique courante pour créer des liens qui ne sont liés nulle part. Étant donné que les images de survol qui ne sont pas liées à une autre page ont de nombreux usages, cette technique est utile. Rappelez-vous simplement que si vous voulez que votre rollover soit lié, vous devez remplacer le signe # par un lien vers une autre page.
-
Cliquez sur OK.
Les images sont configurées automatiquement en tant que survol.
-
Pour voir le rollover en cours, enregistrez le fichier, puis cliquez sur l'icône de globe en haut de l'espace de travail pour prévisualiser votre page dans un navigateur Web.
Vous pouvez voir comment fonctionne votre survol dans la vue Conception de Dreamweaver ou en utilisant l'option Affichage en direct. Lorsque vous cliquez sur le bouton En direct en haut à gauche de l'espace de travail, vous transformez Dreamweaver en un navigateur Web qui affiche des pages similaires au navigateur Chrome.
Lorsque vous prévisualisez une page de votre ordinateur comportant une image de survol, certains navigateurs Web affichent un avertissement indiquant que vous devez autoriser les contrôles ActiveX à afficher la page. Ceci est un avertissement de sécurité qui apparaît uniquement lorsque la page est ouverte sur le même ordinateur où la page est enregistrée.
Si vous publiez la page sur un serveur Web et que vous l'affichez ensuite via une connexion Internet, vous et vos visiteurs ne verront pas cette erreur.
