Il y a eu un moment dans l'histoire de la conception Web où de nombreux sites ont utilisé une fonctionnalité appelée "cartes d'image". Ceci est une liste de coordonnées attachées à une image spécifique sur une page. Ces coordonnées créent des zones de lien hypertexte sur cette image, ce qui est essentiel pour ajouter des "points chauds" à un graphique, chacun pouvant être codé pour créer un lien vers différents endroits. Ceci est très différent de simplement ajouter une balise de lien à une image, ce qui ferait que tout le graphique deviendrait un gros lien vers une destination unique.
Exemples: Imaginez avoir un fichier graphique avec une image des États-Unis. Si vous voulez que chaque état soit "cliquable" afin qu'il puisse accéder aux pages concernant cet état spécifique, vous pouvez le faire avec une carte-image. De même, si vous avez une image d'un groupe de musique, vous pouvez utiliser une carte-image pour que chaque membre individuel puisse être cliqué sur une page ultérieure concernant ce membre du groupe.
Les cartes illustrées vous semblent-elles utiles? Ils l'étaient certainement, mais ils sont tombés en disgrâce sur le Web d'aujourd'hui. Ceci est dû, du moins en partie, au fait que les cartes d’image nécessitent des coordonnées spécifiques pour fonctionner. Les sites d'aujourd'hui sont conçus pour être réactifs et les images sont redimensionnées en fonction de la taille de l'écran ou du périphérique. Cela signifie que les coordonnées prédéfinies, c'est-à-dire le mode de fonctionnement des cartes d'images, se désagrègent lorsqu'un site est mis à l'échelle et que les images changent de taille. C’est pourquoi les cartes d’image sont rarement utilisées sur les sites de production, mais elles présentent toujours des avantages pour les démonstrations ou les cas où vous forcez la taille d’une page.
Vous souhaitez savoir comment créer une carte-image, en particulier avec Dreamweaver? Le processus n'est pas particulièrement difficile, mais ce n'est pas facile non plus, vous devez donc avoir une certaine expérience avant de commencer.
Commencer
Commençons. La première étape consiste à ajouter une image à votre page Web. Vous allez ensuite cliquer sur l'image pour la mettre en évidence. À partir de là, vous devez accéder au menu des propriétés (et cliquer sur l’un des trois outils de dessin de points névralgiques: rectangle, cercle ou polygone. N'oubliez pas de nommer votre image, ce que vous pouvez faire dans la barre de propriétés. Vous pouvez nommer tout ce que vous voulez, utilisez "map" comme exemple.
Dessinez maintenant la forme souhaitée sur votre image à l’aide de l’un de ces outils. Si vous avez besoin de points rectangulaires, utilisez le rectangle. Même chose pour le cercle. Si vous voulez des formes de points chauds plus complexes, utilisez le polygone. C’est ce que vous utiliseriez probablement dans l’exemple de la carte des États-Unis, car le polygone vous permettrait de supprimer des points et de créer des formes très complexes et irrégulières sur l’image.
Dans la fenêtre des propriétés du hotspot, saisissez ou naviguez jusqu'à la page à laquelle le hotspot doit être lié. C'est ce qui crée cette zone de liaison. Continuez à ajouter des points chauds jusqu'à ce que votre carte soit complète et que tous les liens que vous souhaitez ajouter aient été ajoutés.
Une fois que vous avez terminé, examinez votre carte d’image dans un navigateur pour vous assurer qu’elle fonctionne correctement. Cliquez sur chaque lien pour vous assurer qu'il va à la ressource ou à la page Web appropriée.
Inconvénients des cartes d'image
Encore une fois, sachez que les cartes-images ont plusieurs inconvénients, même en dehors du manque de support mentionné plus haut avec des sites Web réactifs. Premièrement, les petits détails peuvent être obscurcis dans une carte d’image. Par exemple, des cartes-images géographiques peuvent aider à déterminer le continent d'un utilisateur, mais ces cartes peuvent ne pas être suffisamment détaillées pour identifier le pays d'origine de l'utilisateur. Cela signifie qu'une carte-image peut aider à déterminer si un utilisateur est originaire d'Asie mais pas du Cambodge en particulier.
Les cartes d’image peuvent également se charger lentement. Ils ne doivent pas être utilisés plusieurs fois sur un site Web car ils occupent trop d'espace pour pouvoir être utilisés sur chaque page d'un site Web. Trop de cartes sur une seule page créerait un grave goulot d'étranglement et aurait un impact considérable sur les performances du site.
Enfin, les cartes d’image peuvent ne pas être faciles à accéder pour les utilisateurs ayant des problèmes visuels. Si vous avez utilisé des cartes-images, vous devez également créer un autre système de navigation pour ces utilisateurs.
Ligne de fond
Utilisez des cartes d’image de temps en temps lorsque vous essayez de créer une démonstration rapide d’une conception et de son fonctionnement. Par exemple, si vous modifiez la conception d'une application mobile et que vous souhaitez utiliser des cartes illustrées pour créer des points chauds afin de simuler l'interactivité de l'application. C’est beaucoup plus facile à faire que de coder l’application ou même de créer des pages Web factices construites selon les normes actuelles avec HTML et CSS. Mais les placer dans un site de production ou une application est très délicat et devrait probablement être évité sur les sites Web actuels.
