Les cartes d’images sont un moyen passionnant et intéressant d’animer votre site web. Grâce à elles, vous pouvez télécharger des images et rendre certaines parties de ces images cliquables vers d’autres ressources en ligne. Si vous êtes dans le pétrin et que vous ne voulez pas télécharger un éditeur de cartes d’images, il est facile de créer une carte à l’aide de balises HTML.
Vous aurez besoin d’une image, d’un éditeur d’image et d’une sorte d’éditeur HTML ou de texte. La plupart des éditeurs d’images vous montreront les coordonnées de votre souris lorsque vous pointerez dans l’image. Ces données de coordonnées sont tout ce dont vous avez besoin pour commencer à utiliser des cartes d’images.
Contenu
Création d’une carte d’images
Pour créer une carte en images, il faut d’abord sélectionner une image qui servira de base à la carte. L’image doit être de « taille normale », c’est-à-dire que vous ne devez pas utiliser une image si grande que le navigateur la mette à l’échelle.
Lorsque vous insérez l’image, vous ajoutez un attribut supplémentaire qui identifie les coordonnées de la carte :
Lorsque vous créez une carte en image, vous créez une zone cliquable sur l’image, les coordonnées de la carte doivent donc s’aligner sur la hauteur et la largeur de l’image que vous avez sélectionnée. Les cartes supportent trois types de formes différentes :
- rectangle ou figure à quatre côtés
- un polygone ou une figure à plusieurs côtés
- cercle – un cercle
Pour créer les zones, vous devez isoler les coordonnées spécifiques que vous avez l’intention de cartographier. Une carte peut se composer d’une ou plusieurs zones définies sur l’image qui, lorsqu’on clique dessus, ouvrent un nouvel hyperlien.
Pour un rectangle, vous ne cartographiez que les coins supérieur gauche et inférieur droit. Toutes les coordonnées sont indiquées en x,y (au-dessus, en haut). Ainsi, pour le coin supérieur gauche 0,0 et le coin inférieur droit 10,15, vous devez taper 0,0,10,15. Vous l’incluez ensuite dans la carte :
Pour un polygone, on cartographie chaque coordonnée x,y séparément. Le navigateur Web relie automatiquement le dernier ensemble de coordonnées au premier ; tout ce qui se trouve à l’intérieur de ces coordonnées fait partie de la carte.
Les formes de cercle ne nécessitent que deux coordonnées, comme le rectangle, mais pour la deuxième coordonnée, vous spécifiez le rayon ou la distance par rapport au centre du cercle. Ainsi, pour un cercle dont le centre est à 122,122 et le rayon à 5, vous écrirez 122,122,5 :
Toutes les zones et formes peuvent être incluses dans la même balise de carte :
Considérations
Les cartes d’images étaient beaucoup plus courantes à l’époque du Web 1.0 des années 1990 jusqu’au tout début des années 2000 – les cartes d’images constituaient souvent la base de la navigation d’un site web. Un concepteur créait une sorte d’image pour indiquer les éléments du menu, puis établissait une carte.
Les approches modernes encouragent une conception réactive et utilisent des feuilles de style en cascade pour contrôler le placement des images et des hyperliens sur une page.
Bien que la balise map soit toujours prise en charge dans la norme HTML, l’utilisation d’appareils mobiles avec de petits facteurs de forme peut entraîner des problèmes de performance inattendus avec les cartes d’images. En outre, les problèmes de bande passante ou les images brisées rendent la valeur d’une carte d’image sans objet.
N’hésitez donc pas à continuer à utiliser cette technologie stable et bien comprise, sachant qu’il existe des alternatives plus efficaces actuellement en vogue chez les concepteurs de sites web.
