Vidéo: Formation Dreamweaver -12- Insertion d'une image survolée 2024
Dans Dreamweaver, Images survolées - comme son nom l'indique - sont conçus pour réagir lorsque quelqu'un place un curseur sur une image. L'effet peut être aussi dramatique qu'une image d'un chien remplacé par une image d'un lion, ou aussi subtile que la couleur d'un mot changeant comme une image remplace une autre. Quoi qu'il en soit, Dreamweaver inclut une boîte de dialogue spéciale pour les survols qui fait de la création d'un effet de survol simple l'un des comportements les plus faciles à appliquer.
Pour créer une image survolée à l'aide de la boîte de dialogue Insérer un survol de l'image de Dreamweaver, procédez comme suit:
1. Cliquez pour placer votre curseur sur la page sur laquelle vous voulez que le survol apparaisse.
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 obtenez des effets de mise à l'échelle étranges car les deux images doivent être affichées exactement dans le même espace sur la page.
2. Choisissez Insérer -> Objets image -> Image survolée.
La boîte de dialogue Insérer une image survolée apparaît.
3. 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.
4. Dans la zone Image d'origine, spécifiez la première image que vous souhaitez voir. Utilisez le bouton Parcourir pour localiser et sélectionner l'image.
Si les images ne se trouvent pas déjà dans le dossier racine de votre site, Dreamweaver les copiera sur votre site lorsque vous créerez le survol.
5. Dans la zone Image survolée, entrez l'image que vous souhaitez rendre visible lorsque les visiteurs déplacent leurs curseurs sur la première image.
Encore une fois, vous pouvez utiliser le bouton Parcourir pour localiser et sélectionner l'image.
6. 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 la souris n'aura pas été déplacée sur l'image d'origine.
7. Dans la zone Lorsque cliqué, allez à l'URL, entrez une adresse Web ou recherchez 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é.
8. Cliquez sur OK.
Les images sont automatiquement configurées en tant que survol.
9. Cliquez sur l'icône en forme de globe en haut de l'espace de travail pour prévisualiser votre travail dans un navigateur et tester le fonctionnement du survol.
