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 :

http://telquel.ma/2014/09/29/decoupage-regionale-nouveau-projet-devoile_1417475


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 allons 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 possibles 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...
Mise à jour

Après vérification le 26/03/2020, le site http://imagemap-generator.dariodomi.de/ n'est plus disponible, utiliser plutôt https://www.image-map.net/ 

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Nom des services Windows en Français et en Anglais

Nom long anglais Nom court Nom long français ActiveX Installer (AxInstSV) AxInstSV Programme d’installation ActiveX (AxInstSV) Adaptive Brightness SensrSvc Brillance adaptative Application Experience AeLookupSvc Expérience d’application Application Host Helper Service AppHostSvc Application Host Helper Service Application Identity AppIDSvc Identité de l’application Application Information Appinfo Informations d’application Application Layer Gateway Service ALG Service de la passerelle de la couche Application Application Management AppMgmt Gestion d’applications ASP.NET State Service aspnet_state Service d'état ASP.NET Background Intelligent Transfer Service BITS Service de transfert intelligent en arrière-plan Base Filtering Engine BFE Moteur de filtrage de base BitLocker Drive Encryption Service BDESVC Servic...
Lire la suite

Comment afficher le mot de passe d’une connexion wifi mémorisé sur une machine Windows

Image
Problème : Je me suis connecté une fois sur un réseau wifi à partir de mon PC. Plus tard, j’ai voulu me connecter en utilisant mon mobile mais le problème c’est que je ne me rappelle plus du mot de passe. Dans ce qui suit je vous montre comment récupérer le mot de passe sauvegardé sur le PC. Procédure Aller sur Centre Réseau et Partage (cliquer avec le bouton droit sur l'icone du wifi sur la barre de taches). Cliquer sur la connexion wifi Cliquer sur le bouton Propriétés sans fil. Choisir l’onglet Sécurité Cliquer sur la case à cocher Afficher les caractères
Lire la suite

Techniques de Recherche sur google

Image
L'histoire a commencé par deux jeunes chercheurs à Stanford qui ont travaillé sur un projet appelé "Digital Library" Sergey Brin (21 ans) et Larry Page (22 ans) Ils ont développé un puissant algorithme appelé PageRank (pour rendre hommage à Larry Page). Ce qui a permis à passer d'une simple machine en Lego remarquer au passage les couleurs utilisées par google à un des plus grands data centers au monde Le premier serveur utilisé par les fondateurs de google est maintenant exposé dans le musée de l’informatique de l’université de Stanford est composé de  10 disques durs de 4Go  (la capacité maximale à l’époque). (Voir: http://infolab.stanford.edu/pub/voy/museum/pictures/display/0-4-Google.htm) Et qui fait passer l'action de 85$US au lancement de la société Google à plus de 740 $US aujourd’hui. En fait, depuis le 2 octobre une nouvelle société a été fondée (Alphabet Inc.) et son PDG est Larry Page alors que google est présidée par l’hind...
Lire la suite