map et area.
Nous allons ici créer une carte interactive des régions de France. Chaque région de la carte devra être cliquable indépendamment des autres.
Pour cela, nous allons déjà avoir besoin d’une carte de France sous forme d’image avec les différentes régions dessinées dessus. Je vous propose donc de télécharger l’image ci-dessous :
Les éléments HTML map et area
Ensuite, nous allons devoir utiliser les éléments map et area. L’élément map permet de créer une carte-image. Cet élément va nous permettre de définir des portions d’image qui vont pouvoir être cliquables indépendamment les unes des autres.
Chaque partie cliquable de la carte image va être définie par un élément area. Les différents éléments area vont être imbriqués dans notre élément map.
L’élément area supporte de nombreux attributs. 4 vont particulièrement nous intéresser ici : les attributs shape, coords, href et alt.
Le premier attribut de l’élément area à connaitre est l’attribut shape. Cet attribut nous permet de spécifier la forme représentée par l’élément area. Les valeurs supportées sont rect qui définit une forme rectangulaire, circle qui définit une forme circulaire, poly qui définit une forme polygonale et default qui représente la partie de l’image non définie par d’autres éléments area.
L’attribut coords permet de spécifier les coordonnées de la portion d’image représentée par l’élément area courant. Les valeurs qu’on va pouvoir passer à cet attribut dépendent de la valeur passée à l’attribut shape.
Si shape = rect, nous allons passer 4 valeurs à coords. Les deux premières valeurs représentent les coordonnées du coin supérieur gauche du rectangle tandis que les deux dernières représentent les coordonnées du coin inférieur droit.
Si shape = circle, nous allons passer 3 valeurs à coords. Les deux premières valeurs représentent les coordonnées du centre du cercle tandis que la troisième représente le rayon du cercle.
Si shape = poly, nous allons pouvoir passer autant de valeurs qu’on le souhaite à coords. Chaque paire de valeurs va définir les coordonnées d’un bord du polygone.
Si shape = default, il n’y a pas besoin de préciser d’attribut coords à l’élément area puisque shape = default indique que l’élément area recouvre toute la partie de l’image non recouverte par les autres éléments area.
L’attribut href va nous permettre de spécifier un lien hypertexte pour chaque élément area et va donc nous permettre de rendre notre carte “interactive”.
Si nos éléments area disposent d’attributs href, alors il faudra également ajouter un attribut alt qui va nous permettre de spécifier un texte descriptif alternatif la chaque zone délimitée par l’élément area.
Exemple de création d’une carte de France interactive des régions avec map et area
Pour créer notre carte, nous allons utiliser shape = poly puisque les régions ont des formes géométriques non triviales.
Nous allons “lier” notre image à notre élément map grâce à des attributs usemap pour l’image et name pour l’élément map.
Nous n’allons pas cartographier précisément chaque région car cela n’aurait aucun intérêt mais allons simplement nous contenter de rendre quelques régions cliquables.
La seule chose à savoir ici est que le bord supérieur gauche de notre image est situé en 0,0. Nous allons indiquer les coordonnées par rapport à cela.
Pour connaitre la surface prise par une région sur notre image, il existe plusieurs solutions : soit on utilise un logiciel qui nous permet de quadriller notre image et on calcule les différents coins de nos polygones, soit on utilise un outil en ligne qui nous permet de calculer automatiquement les coordonnées de différents points comme le site image-map.net
Une fois qu’on a les coordonnées, le code est très facile à deviner :
