Sélectionnez l’image dans la fenêtre de document.
Dernière mise à jour le
25 sept. 2023
Comment utiliser des cartes graphiques sous Dreamweaver pour créer des zones réactives interactives pour votre site web.
Une carte graphique est une image ayant été divisée en régions appelées zones réactives. Lorsque vous cliquez sur une zone réactive, une action est exécutée, par exemple, l’ouverture d’un nouveau fichier.
Les cartes graphiques côté client stockent les informations relatives aux liens hypertextes dans le document HTML, alors que les cartes graphiques côté serveur conservent ces informations dans un fichier de carte séparé. Lorsqu’un visiteur de site clique sur une zone réactive dans l’image, l’URL associée est envoyée directement au serveur. Ceci rend les cartes graphiques côté client plus rapides que leurs équivalents sur le serveur, car celui-ci n’a pas à interpréter les coordonnées du point sur lequel l’utilisateur a cliqué.
Dreamweaver ne modifie pas les références aux cartes graphiques sur le serveur, dans les documents existants. Vous pouvez utiliser les cartes graphiques côté client et côté serveur dans le même document. Les navigateurs qui prennent en charge les deux types de cartes donnent la priorité aux cartes graphiques côté client. Pour inclure une carte graphique sur le serveur dans un document, vous devez écrire le code HTML approprié.
Annotation
Pour utiliser des zones réactives dans Dreamweaver, vous devez être en mode Création.
Insertion de cartes graphiques côté client
Pour insérer une carte graphique côté client, créez une zone réactive, puis définissez un lien qui s’ouvre lorsqu’un utilisateur clique sur la zone réactive.
Annotation
Vous pouvez créer plusieurs zones réactives, mais elles font toutes partie de la même carte graphique.
Dans l’inspecteur Propriétés, cliquez sur la flèche d’agrandissement
située dans le coin inférieur droit pour visualiser toutes les propriétés.
Dans le champ Carte, saisissez un nom unique pour la carte graphique. Si vous utilisez plusieurs cartes graphiques dans le même document, veillez à donner à chaque carte un nom unique.
Pour définir les zones de la carte graphique, procédez de l’une des manières suivantes :
Sélectionnez l’outil Cercle
et
faites glisser le pointeur sur l’image pour créer une zone réactive circulaire. Sélectionnez l’outil Rectangle
et
faites glisser le pointeur sur l’image pour créer une zone réactive rectangulaire.Sélectionnez l’outil Polygone
pour
définir une zone réactive de forme irrégulière en cliquant une fois pour chaque point
d’angle. Cliquez sur l’outil Flèche pour fermer la forme.Après avoir créé la zone réactive, l’inspecteur Propriétés de cette zone apparaît.
Dans le champ Lien, cliquez sur l’icône du dossier pour rechercher le fichier à ouvrir lorsque l’utilisateur clique sur la zone réactive, ou saisissez le chemin.
Dans la liste déroulante Cible, sélectionnez la fenêtre dans laquelle le fichier devra s’ouvrir ou saisissez son nom.
Les noms de toutes les images du document actif apparaissent dans la liste déroulante. Si vous spécifiez une image inexistante, la page liée est chargée dans une nouvelle fenêtre portant le nom que vous avez spécifié. Vous pouvez également choisir parmi les noms de cible réservés suivants :
- _blank charge le fichier lié dans une nouvelle fenêtre, sans nom, du navigateur.
- _parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n’est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.
- _self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant celle par défaut, vous n’avez généralement pas à la spécifier.
- _top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres.
- _new charge le fichier lié dans une nouvelle fenêtre de navigateur.
Annotation
L’option Cible n’est disponible que lorsque la zone réactive sélectionnée contient un lien.
Dans la zone Alt, tapez un texte secondaire à afficher dans
les navigateurs qui affichent seulement du texte ou qui téléchargent les images manuellement. Certains
navigateurs affichent ce texte sous forme d’info-bulle lorsque l’utilisateur fait passer le pointeur
de la souris au-dessus de la zone réactive.
Répétez les étapes 4 à 7 pour définir d’autres zones réactives
dans la carte graphique.
Une fois la définition de la carte de l’image terminée, cliquez sur une zone vierge
du document pour modifier l’inspecteur Propriétés.
Modification des zones réactives d’une carte graphique
Vous pouvez facilement modifier les zones réactives que vous créez dans une carte graphique. Vous pouvez déplacer un groupe de zones réactives, redimensionner des zones réactives ou déplacer une zone réactive vers l’avant ou l’arrière dans un élément à positionnement absolu.
Vous pouvez également copier une image contenant des zones réactives d’un document vers un autre ou copier une ou plusieurs zones réactives d’une image et les coller dans une autre image. Les zones réactives associées à l’image sont également copiées dans le nouveau document.
Sélection de plusieurs zones réactives dans une carte graphique
Utilisez le pointeur de zone
réactive pour sélectionner une zone réactive.
Effectuez l’une des opérations suivantes :
En maintenant la touche Maj enfoncée, cliquez tour à tour sur les autres zones réactives à sélectionner.
Appuyez sur les touches Ctrl+A (Windows) ou Cmd+A (Macintosh) pour sélectionner toutes les zones réactives.
Déplacement d’une zone réactive
Utilisez le pointeur de zone réactive pour sélectionner
la zone réactive.
Effectuez l’une des tâches suivantes :
Faites glisser la zone réactive vers une nouvelle zone.
Utilisez la touche Ctrl et une touche fléchée pour déplacer une zone réactive de 10 pixels dans le sens sélectionné.
Utilisez les touches fléchées pour déplacer une zone réactive de 1 pixel dans le sens sélectionné.
Redimensionnement d’une zone réactive
Utilisez
le pointeur de zone réactive 
pour
sélectionner la zone réactive.
pour
sélectionner la zone réactive.
Faites glisser une poignée de sélection de la zone réactive
pour en modifier la taille ou la forme.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
