[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.
<!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″]
Image à télécharger
[/ux_image_box]
Plongez au cœur du tournage des "Petites Victoires" Ce dimanche, France 2 vous invite à…
Cécile et Marion : Une victoire inattendue au bout du voyage Dans un final haletant,…
Alerte Fiscale : Un email important va arriver dans votre boîte ! Restez vigilants !…
Ange Capuozzo blessé : Toulouse sous le choc Le Stade Toulousain traverse une période difficile.…
Du Camp Nou au rayon sport : l'étonnante reconversion de Jérémy Mathieu Après avoir brillé…
Caen Accueille le Spectacle Incontournable des Forman Caen, préparez-vous à être émerveillés ! Les talentueux…