Ce qu'il faut savoir
- Sélectionner Conception > ajouter une image > sélectionner une image > Propriétés > Carte > sélectionner Point chaud outil > dessiner une forme > Propriétés > Relier > entrez l'URL.
- Inconvénient majeur: la conception de sites Web réactifs nécessite des images évolutives afin que les liens puissent se retrouver au mauvais endroit.
Cet article explique comment créer une carte-image à l'aide de Dreamweaver. Les instructions s'appliquent à Adobe Dreamweaver version 20.1.
Qu'est-ce qu'une carte-image Dreamweaver?
Lorsque vous ajouter une balise de lien à une image dans Dreamweaver, le graphique entier devient un lien hypertexte vers une seule destination. Les cartes-images, d'autre part, peuvent inclure plusieurs liens mappés à des coordonnées spécifiques sur le graphique. Par exemple, vous pouvez créer une carte-image des États-Unis qui dirige les utilisateurs vers le site Web officiel de chaque État lorsqu'ils cliquent dessus.
Il est également possible de construire des images cliquables en utilisant uniquement HTML.
Comment créer une image cliquable avec Dreamweaver
Pour créer une image cliquable à l'aide de Dreamweaver:
-
Sélectionner Conception vue, ajoutez l'image à la page Web, puis sélectionnez-la.
-
Dans le Propriétés panneau, allez au Carte et entrez un nom pour la carte-image.
Si la Propriétés le panneau n'est pas visible, allez à La fenêtre > Propriétés.
-
Sélectionnez l'un des trois outils de dessin de zone réactive (rectangle, cercle ou polygone), puis dessinez une forme pour définir la zone d'un lien.
Les outils de dessin de hotspot n'apparaissent pas dans la vue en direct. Le mode Conception doit être sélectionné pour créer des images cliquables.
-
Dans le Propriétés fenêtre, allez à la Relier champ et entrez le URL auquel vous souhaitez établir un lien.
Vous pouvez également sélectionner le dossier à côté du Relier champ, puis choisissez un fichier (comme une image ou une page Web) que vous souhaitez lier.
-
Dans le Alt champ, saisissez un texte alternatif pour le lien.
Dans le Cible liste déroulante, choisissez la fenêtre ou l'onglet dans lequel le lien s'ouvrira.
-
Pour créer une autre zone réactive, sélectionnez l'outil pointeur, puis sélectionnez l'un des outils de zone réactive.
-
Créez autant de zones réactives que vous le souhaitez, puis examinez la carte-image dans un navigateur pour vous assurer qu'elle fonctionne correctement. Sélectionnez chaque lien pour vous assurer qu'il mène à la ressource ou à la page Web appropriée.
Avantages et inconvénients des images cliquables
Il y a avantages et inconvénients de l'utilisation d'images cliquables dans la conception Web moderne. Bien que ceux-ci puissent rendre une page Web plus interactive, un inconvénient majeur est que les cartes-images reposent sur des coordonnées spécifiques pour fonctionner. Site Web adaptatif a besoin images qui évoluent en fonction de la taille d'un écran ou appareil, de sorte que les liens peuvent se retrouver au mauvais endroit lorsque l'image change de taille. C'est pourquoi les cartes-images sont rarement utilisées sur les sites Web aujourd'hui.
Les images cliquables peuvent prendre beaucoup de temps à charger. Trop d'images cliquables sur une seule page peuvent créer un goulot d'étranglement qui affecte les performances du site. De petits détails peuvent être masqués dans une image cliquable, ce qui limite leur utilité, en particulier pour utilisateurs déficients visuels.
Les images cliquables peuvent être utiles lorsque vous souhaitez créer une démonstration rapide. Par exemple, si vous simulez la conception d'une application, utilisez des images cliquables pour créer des hotspots afin de simuler l'interactivité avec l'application. C'est plus facile à faire que de coder l'application ou de créer une page Web factice avec HTML et CSS.