Créer une carte cliquable en HTML

Objectif 
A titre d’exemple nous voulons créer sur une page web, une carte cliquable qui comporte les douze provinces du Maroc. 

Procédure :

Nous commençons par chercher une carte du Maroc ou les douze provinces sont clairement définies. Une telle carte se trouve à l’URL suivante :



En html, il est possible de créer une image cliquable en utilisant les balises MAP et AREA. La syntaxe est :



<IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur" HEIGHT="hauteur" ALT="commentaire" BORDER="épaisseur_de_la_bordure" ALIGN="alignement" HSPACE="marge_horizonale" VSPACE="marge_verticale" USEMAP="#nom_de_la_carte">.

<MAP NAME="nom_de_la_carte">

Différentes balises <AREA>...

</MAP>
On définit plusieurs zones sur la carte avec la balise AREA. La syntaxe est :

<AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées" HREF="adresse_destination" ALT="commentaire">
La forme de la zone est définie par SHAPE qui peut avoir les valeurs suivantes :

  • circle pour une zone circulaire,  
  • rect pour une zone rectangulaire 
  • enfin poly pour une zone sous forme de polygone.
Toute la difficulté est de définir les différentes coordonnées qui décrivent la zone. Pour cela nous allez utiliser un outil en ligne pour nous aider à définir les zones de nos provinces de type poly.
Le site se trouve à l’adresse :  http://imagemap-generator.dariodomi.de/



Nous commençons par télécharger le fichier image sur le site en cliquant sur le bouton Image Upload.


Pour ajouter une province, on clique sur le bouton + Add Area puis on clique sur plusieurs points pour définir le contour de la province. Au fur et à mesure, les coordonnées des points qui constituent le contour sont renseignés dans la zone de texte « Coordinates » et le code HTML est généré automatiquement.
Exemple en suivant le contour de la province du sud, on obtient :


Après avoir définit les douze provinces, on intègre les données obtenus  avec les noms des provinces et les fichiers html à ouvrir quand on clique sur une province dans le code HTML suivant:


<html>
<body>
<p>Cliquer sur la province</p>
<img src="carte-regions-maroc.jpg" alt="Carte du Maroc" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="Tanger-Tetouan" href="Prov1.htm" shape="poly" coords="644,50,671,42,685,73,713,88,686,108,674,121,651,103,629,93" />
<area alt="Oriental et Rif" title="Oriental et Rif" href="Prov2.html" shape="poly" coords="702,103,718,87,746,79,774,82,785,69,791,85,814,86,843,108,849,167,797,171,787,187,775,179,784,165,762,160,746,178,734,176,743,152,744,126,752,113,753,102,742,98,729,111,715,115,701,109" />
<area alt="Fès - Meknès" title="Fès - Meknès" href="Prov3.html" shape="poly" coords="652,185,674,205,677,217,694,209,736,233,758,206,791,200,785,186,774,177,781,167,761,156,743,178,734,173,744,147,742,137,746,100,714,112,695,104,680,108,667,135,660,147,652,142,646,146,649,157" />
<area alt="Rabat - Salé - Kénitra" title="Rabat - Salé - Kénitra" href="Prov4.html" shape="poly" coords="587,161,611,133,628,95,672,125,662,144,650,140,654,162,651,192,630,191,627,184,622,184,620,200,613,202,600,199,601,178,593,177" />
<area alt="Béni Mellal - Khénifra" title="Béni Mellal - Khénifra" href="Prov5.html" shape="poly" coords="585,250,591,232,599,196,614,200,620,184,630,185,630,194,649,190,648,186,672,205,679,218,684,207,696,205,701,210,700,217,730,234,738,232,751,259,733,263,727,254,701,269,695,259,673,270,665,276,653,270,602,296,601,309,582,304,576,287,578,281,588,281" />
<area alt="Casablanca - Settat" title="Casablanca - Settat" href="Prov6.html" shape="poly" coords="492,223,527,187,584,161,600,184,583,250,558,240,540,219,540,238,514,250,507,237,497,237" />
<area alt="Marrakech - Safi" title="Marrakech - Safi" href="Prov7.html" shape="poly" coords="449,325,449,296,478,255,479,233,490,223,499,237,509,238,515,248,540,236,542,217,560,240,581,247,589,279,574,286,581,301,549,318,539,331,500,333,496,325,490,335,454,337" />
<area alt="Drâa - Tafilalet" title="Drâa - Tafilalet" href="Prov8.html" shape="poly" coords="551,320,565,352,556,357,560,372,574,376,580,362,589,366,604,360,615,369,617,413,660,418,745,349,761,326,748,320,753,300,783,286,797,280,796,267,819,260,828,265,841,260,878,264,877,251,885,235,862,218,848,170,827,169,800,172,783,185,793,198,774,206,756,204,741,232,750,254,731,261,730,258,702,266,695,257,672,266,668,275,663,274,657,268,617,294,605,297,601,305,579,300" />
<area alt="Souss - Massa" title="Souss - Massa" href="Prov9.html" shape="poly" coords="437,403,455,376,458,362,446,342,447,330,454,334,461,330,487,332,497,327,501,331,539,334,552,316,564,350,556,359,558,370,572,375,577,362,589,364,604,358,612,365,611,375,616,411,600,417,582,411,503,459,501,483,472,438,481,429,469,410,462,416,445,414" />
<area alt="Guelmim - Oued Noun" title="Guelmim - Oued Noun" href="Prov10.html" shape="poly" coords="341,481,361,474,382,452,434,402,446,417,469,412,478,432,473,436,503,484,499,563,482,552,468,531,455,535,436,520,417,509,372,510,354,508" />
<area alt="Laâyoune - Saguia al Hamra" title="Laâyoune - Saguia al Hamra" href="Prov11.html" shape="poly" coords="237,568,248,554,268,509,281,495,339,484,352,508,418,511,457,536,465,530,497,563,498,617,324,609,318,695,290,697,252,689,231,696,202,687,179,691,165,677,170,656,182,618,194,592" />
<area alt="Ed Dakhla - Oued ed Dahab" title="Ed Dakhla - Oued ed Dahab" href="Prov12.html" shape="poly" coords="39,865,30,893,41,838,58,808,70,808,83,777,91,769,90,764,119,721,114,718,102,733,115,714,166,678,173,681,179,690,203,686,232,695,255,689,269,690,287,697,320,695,315,760,281,762,267,777,253,795,255,876" />
</map>
</body>
</html>
Une fois lancé sur un navigateur et en survolant n’importe quelle province on obtient son nom et en cliquant dessus on ouvre un fichier html externe qui correspond à cette province.


D'autres utilisations possibilités de l'image cliquable sont par exemple:

  • Le système solaire, en cliquant sur une planète on en obtient des informations.
  • Le corps humain, en cliquant sur un organe on obtient son nom et ses fonctions
  • Un moteur d'une voiture...

Commentaires

Posts les plus consultés de ce blog

Surveiller l’espace disque sur un serveur Windows 2008

Impossible de joindre un fichier dans OWA

Installation de glpi 0.9 sur un serveur Windows 2012 R2