Comment utiliser des cartes graphiques sous Dreamweaver pour créer des zones interactives dynamiques 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é.

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.

Remarque :

Vous pouvez créer plusieurs zones réactives, mais elles font toutes partie de la même carte graphique.

  1. Sélectionnez l’image dans la fenêtre de document.
  2. 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.
  3. 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.

  4. 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 pour chaque point de segment de droite. 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.

  5. 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.

  6. 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 tous les cadres du document actif apparaissent dans la liste déroulante. Si vous spécifiez un cadre inexistant, 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.

    Remarque :

    L’option Cible n’est disponible que lorsque la zone réactive sélectionnée contient un lien.  

  7. 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’une info-bulle lorsque l’utilisateur fait passer le pointeur de la souris au-dessus de la zone réactive.
  8. Répétez les étapes 4 à 7 pour définir d’autres zones réactives dans la carte graphique.
  9. 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 vers une autre image. Les zones réactives associées à l’image sont également copiées vers le nouveau document.

Sélection de plusieurs zones réactives dans une carte graphique

  1. Utilisez le pointeur de zone réactive pour sélectionner une zone réactive.
  2. 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

  1. Utilisez le pointeur de zone réactive pour sélectionner la zone réactive.
  2. Effectuez l’une des opérations 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

  1. Utilisez le pointeur de zone réactive pour sélectionner la zone réactive.
  2. Faites glisser une poignée de sélection de la zone réactive pour modifier la taille ou la forme de celle-ci.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne