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

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🙂

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s