Carte de France cliquable en HTML

[fancy_header]Carte de France cliquable en HTML[/fancy_header]

Vous souhaitez réaliser intégrer une carte de la France cliquable en langage HTML sur votre site internet ?

Nous vous fournissons ce code source gratuitement pour vous aider. Ici nous prenons l’exemple d’une carte de météo et allons nous servir de la balise <area> et des attributs « shape » et « coords ».

Une image est à votre disposition, téléchargez là (Clic droit > enregistrez-vous).

Il est évident qu’il va vous falloir un éditeur de codes comme Notepad++ voici le lien de téléchargement.

L’arborescence est simple, vous la connaissez : Un dossier contenant le fichier .html, un dossier « images » avec l’image de la carte « cartefrjam.gif ».

[fancy_header tag= »h3″]Les balises et attributs[/fancy_header]

Les balises AREA et /AREA permettent de définir les zones sensibles d’une image. Elles sont utilisées à l’intérieur d’une structure définie par la balise MAP. La balise AREA utilise trois attributs.

SHAPE= »nom_forme »
L’attribut SHAPE permet de définir la forme de la zone; il peut prendre les valeurs RECT (pour un rectangle), CIRCLE (pour un cercle) et POLYGON pour un polygone.
COORDS= »coordonnées »
L’attribut COORDS permet de donner les coordonnées de la zone définie sous la forme d’une suite de nombre séparés par des virgules.
Pour un rectangle on donne les coordonnées des coins supérieur gauche et inférieur droit.
Pour un cercle on donne les coordonnées du centre et le rayon.
Pour un polygone on donne les coordonnées des sommets.
HREF= »lien »
L’attribut HREF permet d’indiquer sous forme d’URL vers quoi pointe la zone sensible.

<!DOCTYPE html>
<html><!--code source rue de l'info ruedelinfo.fr -->
 <head>
  <meta charset="utf-8" />
  <title>Map de France</title>
 </head>

 <body bgcolor="#999999">
  <center> 
   <hr align="center" size="2" width="10" />
   <hr align="center" size="4" width="50" />
   <hr align="center" size="6" width="150" />
   <hr align="center" size="4" width="50" />
   <hr align="center" size="2" width="10" />
   
   <img src="images/cartefrjam.gif" width="390" height="330" usemap="#logomap" alt="Carte de france" />
   
   <map name="logomap">
    <area shape="rect" coords="84,105,130,120"  href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG05/20100719150000" target="_blank" title="Ville de Rennes"       />
    <area shape="rect" coords="84,118,102,131"  href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG05/20100719150000" target="_blank" title="18°C"                  />
    <area shape="rect" coords="136,66,182,81"   href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG03/20100719150000" target="_blank" title="Ville du Havre"        />
    <area shape="rect" coords="136,74,154,95"   href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG03/20100719150000" target="_blank" title="20°C"                 />
    <area shape="rect" coords="213,17,259,32"   href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG01/20100719150000" target="_blank" title="Ville de Lille"       />
    <area shape="rect" coords="214,32,233,43"   href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG01/20100719150000" target="_blank" title="17°C"           />
    <area shape="rect" coords="191,150,239,165" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG14/20100719150000" target="_blank" title="Ville de Bourges"     />
    <area shape="rect" coords="190,162,208,177" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG14/20100719150000" target="_blank" title="18°C"         />
    <area shape="rect" coords="199,85,245,100"  href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG12/20100719150000" target="_blank" title="Ville de Paris"       />
    <area shape="rect" coords="324,87,370,102"  href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG22/20100719150000" target="_blank" title="Ville de Strasbourg"   />
    <area shape="rect" coords="322,100,343,115" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG22/20100719150000" target="_blank" title="21°C"         />
    <area shape="rect" coords="257,191,303,206" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG18/20100719150000" target="_blank" title="Ville de Lyon"      />
    <area shape="rect" coords="255,202,275,218" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG18/20100719150000" target="_blank" title="21°C"         />
    <area shape="rect" coords="267,279,313,294" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG19/20100719150000" target="_blank" title="Ville de Marseille"    />
    <area shape="rect" coords="265,290,285,305" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG19/20100719150000" target="_blank" title="20°C"          />
    <area shape="rect" coords="345,305,363,320" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG17/20100719150000" target="_blank" title="Ville de Ajaccio - 19°C" />
    <area shape="rect" coords="169,260,215,275" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG09/20100719150000" target="_blank" title="Ville de Toulouse"     />
    <area shape="rect" coords="168,273,186,288" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG09/20100719150000" target="_blank" title="18°C"        />
    <area shape="rect" coords="118,230,164,245" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG08/20100719150000" target="_blank" title="Ville de Bordeaux"    />
    <area shape="rect" coords="117,244,136,257" href="http://france.meteofrance.com/france/meteo?PREVISIONS_PORTLET.path=previsionsregion%2FREG08/20100719150000" target="_blank" title="17°C"        />
   </map>
   
   <h3><u>Carte de France</u></h3><small><h5 valign="top"><i>(02/06/1999)</i></h5></small>

   <hr size="2" width="10" />
   <hr size="4" width="50" />
   <hr size="6" width="150" />
   <hr size="8" width="250" />
   
   <p>Cliquez sur une ville pour atteindre la page correspondante sur le site de METEO-FRANCE.</p>
   
   <hr size="8" width="250" />
   <hr size="6" width="150" />
   <hr size="4" width="50" />
   <hr size="2" width="10" />
  </center>
 </body>

</html>

[ux_image_box img= »14802″]