blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Articles tagués ‘carte de france’

Jquery: créer une carte de france interactive avec jquery

il est plus « user friendly » d’utiliser une carte interactive dans un formulaire plutôt qu’une liste ou une textbox, pour récupérer une information géographique. je vous propose dans cet article de voir comment créer une carte de france interactive pour sélectionner un département.

1 – tout d’abord munissez vous d’une carte de france des département vierge, un peu comme ça : http://www.cartograf.fr/fond-carte-france.gif

2 – munissez vous du logiciel gratuit permettant de faire des images map html Mcc HTML Mapper : http://mhm.fr.nf/

3 – le plus chi…. , fastidieux à présent, ouvrez votre carte dans Mcc mapper et amusez vous à découper les départements ou les régions.

4 – récupérer le code html générer en dessous et gardez le sous le coude 🙂

5 – téléchargez la librairie jquery MapHighlight : http://davidlynch.org/projects/maphilight/docs/

votre code html potentiellement pourra avoir cette forme la:


<img class="map" alt="1046.gif" usemap="#1046" src="file:///C:/Documents and Settings/toto/Bureau/mcchtmlmapper/1046.gif"/></pre>
<map id="1046" name="1046">

<area alt="" href="" shape="poly" coords="350,220,363,183,348,184,327,159,312,160,305,173,313,180,306,194,307,204,322,211,331,208,349,218,348,218"/>

</map>

ensuite il suffira d’inclure la libriaire jquery que vous avez telecharger et de mettre en place ce code la:

$(function() {
		$('.map').maphilight();
	});

voila le tour est joué, pour plus de fonctionnalitées concernant la carte, veuillez vous reporter à la documentation du plugin 🙂

Publicités