PDF (adobe.com)

Création d'une image survolée

Vous pouvez insérer des images survolées dans votre page. Une image survolée est une image qui, lorsqu'elle est visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus d’elle.

Vous devez disposer de deux images pour créer l'image survolée : l'image principale (affichée au chargement de la page) et l'image secondaire (qui apparaît lorsque le pointeur est placé au-dessus de l'image principale). Les deux images utilisées doivent avoir les mêmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la première.

Les images survolées sont automatiquement définies pour répondre à l'événement onMouseOver. Vous pouvez configurer une image pour qu'elle réponde à un événement différent (par exemple, un clic de souris) ou modifier une image survolée.

Vous trouverez un didacticiel consacré à la création d'images survolées à l'adresse www.adobe.com/go/vid0159_fr.

  1. Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer l'image survolée.
  2. Insérez l'image survolée à l'aide de l'une des méthodes suivantes :

    • Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images puis sélectionnez l'icône Image survolée. Lorsque l'icône Image survolée s'affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu'à la fenêtre de document.

    • Sélectionnez Insertion > Objets image > Image survolée.

  3. Définissez les options, puis cliquez sur OK.
    Nom de l'image
    Nom de l'image survolée.

    Image d’origine
    L'image qui doit s'afficher au chargement de la page. Entrez le chemin d'accès dans la zone de texte ou cliquez sur Parcourir et sélectionnez l'image.

    Image survolée
    L'image à afficher lorsque le pointeur est placé au-dessus de l'image originale. Entrez le chemin d'accès de l'image ou cliquez sur Parcourir pour la sélectionner.

    Précharger l'image survolée
    Précharge les images dans la mémoire cache du navigateur afin d'éviter tout délai lorsque vous faites passer le pointeur de la souris par-dessus l'image.

    Texte secondaire
    (Facultatif) Texte qui décrit l'image à l'intention des personnes utilisant un navigateur en mode texte.

    Si cliqué, aller à l'URL
    Le fichier à ouvrir lorsqu'un utilisateur clique sur l'image survolée. Entrez le chemin d'accès du fichier ou cliquez sur Parcourir pour le sélectionner.

    Remarque : Si vous ne définissez pas un lien pour l'image, Dreamweaver insère un lien nul (#) dans le code source HTML auquel le comportement de survol est attaché. Si vous supprimez le lien nul, l'image survolée ne fonctionne plus.
  4. Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.
  5. Dans le navigateur, placez le pointeur au-dessus de l'image d'origine pour voir l'image survolée.
    Remarque : Il est impossible de voir l'effet d'une image survolée dans le mode Création.