Cree une map html avec zone coloré sans image

Télécharger le projet
Commenter

Description

quand on cree une image map avec des zone de couleurs différentes on se trouve confronté a devoir cree une image de couleur différent pour chaque zone survolé et bien je suis heureux de vous apprendre que cette époque est révolu grace a cette source qui cree automatiquement les image et les inserre dans la map automatiquement en fonction des balise area d'une map html

le fonctionnement est asser simple, on désigne la map concerné et le script va recupérer le genre de forme (cercle rectangle et polygone) ainsi que les position de chaques forme et il ne reste plus qu'a les retranscrire dans un canvas afin de recree chaques forme et d'en faire soit des images qui seront stoké dans un array, soit stoké directement les donnés du canvas dans un array il y a donc deux possibilité.

etant donné qu'il y a deux méthodes il y a dans le zip deux sources celle qui utilise des images et celle qui utilise directement les donnés du canvas.

jai fait des testes entre les deux methodes et pour ca j'ai utilisé une carte du monde de 714 par 1100 pixel avec 167 polygones et les resultats sont :


pour la source utilisant directement les donnés du canvas

rendu : 3 secondes (firefox 26) 2 secondes (chrome 31) 3 secondes (ie 11)
mémoire : 514 mo

pour la source qui transforme les donnés en image

rendu : 12 secondes (firefox 26) 6 secondes (chrome 31) 13 secondes (ie 11)
mémoire : 6 mo

conclusion les donné brute ont un rendu plus rapide mais prenent plus de place en mémoire comparé au donné transformé en image, si il s'agit d'une carte de france ou autre de meme taille dans les deux cas le rendu sera rapide et l'espace memoire pas tres important.

comme il s'agit d'objet instanciable on peut ajouter plusieurs map

au niveau des options on choisi la couleur et l'opacité des zone on y declare la fonction qui s'executera au clic, on choisi si la zone sera pleine, juste contourné ou les deux, on defini l'epaisseur des trais de contour et enfin on peut choisir de mettre une image a la place de couleur..

le script fonctionne avec ie 8 mais les zones ne sonts pas coloré, pour avoir des zones coloré il faudra cree une image avec les zones coloré pour ce faire j'ai rajouter un generateur d'image a partir de l'image map et des donnés html de la map et dans les option il faudra mettre l'dresse de l'image (derniere option)


question mise en place

dans le fichier html doit se trouver le div conteneur avec l'image map en background et la balise map ou se trouves les area 
<div style='height:214px;width:452px;background:url(image/luna.png);margin:auto' id='image_map7'>
</div>

<map name="area_map" id='area_map' style='height:214px;width:452px'>

<area shape=rect coords="18,23,83,103" href="#">
<area shape=circle coords="284,53,43" href="#">
<area shape=poly coords="386,30,402,37,408,44,408,55,405,58,405,66,404,82,400,90,397,96,390,102,382,105,374,101,367,93,365,83,363,78,359,69,359,63,355,53,355,45,361,36,373,32,377,30,386,30" href="#">
<area shape=poly coords="153,34,160,40,163,45,166,51,166,71,163,75,158,78,158,91,156,97,151,103,144,111,132,112,121,101,120,96,118,90,118,83,115,77,111,71,111,49,114,44,119,37,127,33,136,30,145,31,153,34" href="#">

</map>

et en debut de page dans le header

le lien vers le fichier js et le script qui initialisera chaque map en fonction des options 
<script type="text/javascript" src="res/map_image.js" ></script>

<script type="text/javascript">

function map_init(){

	//pour chaques map on cree une instance en precisant.
	
		
	var div_map_id='image_map';					// id du div de l'image map.
	var area_map_id='area_map';					//id de la balise map associé .
	var fond='plein';							//defini si la zone doit etre pleine. valeur:'plein'
	var couleur_fond='255,255,100';				//donne la couleur des zone mapé en hexa ou rgb.
	var opacite_fond=10;						// opacite du fond valeur de 1 a 10.
	var contour='no_contour';					//definit si on doit mettre un contour. valeur:'contour'
	var couleur_contour='0,0,0';				//donne la couleur de contour des zone mapé en hexa ou rgb.
	var opacite_contour=10;						// opacite du contour valeur de 1 a 10.
	var epaisseur_contour='1';					// definit l'epaisseur de contour.
	var image_en_fond='no_image';				//difinit si il y a une image. valeur:'image'
	var adresse_image_fond='vide';				// le nom et le chemin de l'image si on utilise une image en fond.
	var fonction_au_clic='evtfonction(event)';	//le 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.
	var image_ie_8='';		                    //le chemin et le nom de l'image avec les zone coloré pour internet explorer 8 valeur par default 'sans'.
		
	new ob_map(div_map_id,area_map_id,fond,couleur_fond,opacite_fond,contour,couleur_contour,opacite_contour,epaisseur_contour,image_en_fond,adresse_image_fond,fonction_au_clic,image_ie_8);
            }

typeof window.addEventListener == 'undefined' ? attachEvent("onload",map_init) : addEventListener('load',map_init,false);
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)