Carte interactive avec infobulle (tooltip)

Télécharger le projet
Commenter

Description

la source sert a cree une zone clquable qui change de couleur en la survolant sans avoir besoin de cree une image pour chaques zone survolé

pour cette source je suis partie sur la base d'unee de mes source qui creais les zone coloré par l'intermediaire des coordonné utilisé dans la balise map

la premiere souce utilisait un canevas qui creait pour chaques zone les image coloré alors que celle ci utilise le svg mais aussi le vml qui lui fonctionne avec ie8,. L'avantage d'utiliser le svg est la rapidité de creation des zones coloré comparé au canvas

pour completé le tout j'ai adjoint un infobull optionnel qui utilise un fichier json afin de facilité la mise en place.

le script est donc compatible avec tous les navigateurs y compris ie 8

page teste

page teste2


mise en place :

en premier lieux on inserre le fichier js dans la page et si on utilise l'infotbull on inserre le fichier js pour le json et le css pour l'infobulle 

<link rel="stylesheet" href="res/k_map.css" type="text/css" />

<script type="text/javascript" src="res/map_vml_svg_fad.js" ></script>
<script type="text/javascript" src="res/region.js" ></script>


le html pour une map qui est constitué d'un div avec en fond l'image et la balise map avec les area les deux doivent comporter un id qui seront referencé dans la partie configuration 

<div id='image_map' style='height:283px;width:400px;background:url(image/groupe.jpg);margin:auto' id='image_map4'>
</div>

<map id='area_map4>
<area shape=circle coords="61,52,52" href="#">
<area shape=rect coords="12,106,120,280" href="#">
<area shape=circle coords="163,56,46" href="#">
<area shape=poly coords="172,106,181,113,189,119,194,124,198,152,201,206,199,219,192,232,185,235,181,250,179,257,207,256,205,272,195,269,173,270,172,256,168,237,165,239,162,268,158,271,158,272,133,274,127,266,130,259,153,259,156,254,150,237,139,235,135,224,132,178,134,140,142,122,153,110,160,108,173,108,172,106" href="#">

<area shape=rect coords="211,1,287,276" href="#">
<area shape=circle coords="338,61,49" href="#">
<area shape=rect coords="291,113,399,275" href="#">

</map>



et enfin on met la fonction qui configure la map dans la page ou un fichier js extene c'est comme on veut et on choisi ces options 

function map_init(){

 //pour chaques map on cree une instance en precisant.
 
 var obj={
 div_map_id:'image_map',  // id du div de l'image map.
 
 area_map_id:'area_map', //id de la balise map associé.
 
 fond:true, //defini si la zone doit etre pleine. true ou false
 
 couleur_fond:'255,255,100', //couleur des zone en hexa ou rgb.
 
 opacite_fond:10, // opacite des zones valeur de 1 a 10.
 
 contour:false, //avec ou sans contour. true ou false
 
 couleur_contour:'0,0,0', //couleur de contour en hexa ou rgb.
 
 opacite_contour:10, // opacite du contour valeur de 1 a 10.
 
 epaisseur_contour:'1', // epaisseur de contour.
 
 fad_on:true, // effet fading pour les zones survolé ne fonctionne pas avec ie <= 8
 
 fonction_au_clic:'evtfonction(event)', //nom de la fonction qui doit etre executé quand on clic sur une zone si on laisse le champ vide on sera redirigé en fonction du href de l'area.
 
 suis:true,// indique si l'info bull doit etre utilisé (tooltip) true ou false.
 
 json:js_region, // le nom de l'objet contenu dans le fichier json pour l'info bull (tooltip)
 
 decalage_y:15, // decallage en y de l'infobull par raport a la souris.
 
 decalage_x:25  // decallage en x de l'infobull par raport a la souris.
 }
 
 new ob_map(obj);
 }
typeof window.addEventListener == 'undefined' ? attachEvent("onload",map_init) : addEventListener('load',map_init,false);



pour l'infobull il faudra donc creer un objet json que l'on configure selon les besoins il s'agit d'un tableau d'objet la position de chaques element correspond a la position des balise area de la map dans l'exemple le premier element correspond au nord pas de calais et si on regarde la partie map du html la premiere balise area correspond au nord pas de calais. On a la possibilité des mettre dans l'infobulle un texte seul une image seuk, un texte avec une image ou un texte avec une image et un commentaire
voici un exemple 

var js_region=[
    
 {
 "titre":"nord pas de calais",
 "contenu":false,
 "classe":"cadre",
 "image":false

 },
 
 {
 "titre":"picardie",
 "contenu":"bonjour la picardie",
 "classe":"cadre",
 "image":false

 },
 
 {
 "titre":"haute normandie",
 "contenu":'le gros horloge se situant a rouen dans la rue pietonne portant le meme nom',
 "classe":"cadre",
 "image":"image/gros_horloge.jpg"

  }
 ]


et pour cree une map html voici un lien vers mccHTMLMapper outil simple d'utilisation qui posede entre autre l'outil main levé tres pratique pour creer des poligones
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)