Cree une map html avec zone coloré sans image

Soyez le premier à donner votre avis sur cette source.

Vue 6 954 fois - Téléchargée 1 307 fois

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);

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Bonjour
Ça l'ai super ça, j'avais fait un truc dans le même genre, avec une mise à jour de données couplée avec un fichier php, mais cela nécessitait de préparer le découpage en php et mise à jour avec de l'ajax et du php.
Cette solution me parait plus viable, je regarde ça de près.
Par contre je me posais la question du navigateur, IE supporte les canevas que depuis peu ce me semble.
JJDai
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
re bonjour
un lien intéressant sur canvas pour ceux que cela intéresse.
http://www.alsacreations.com/tuto/lire/1484-introduction.html
Je confirme que IE 6,7 et 8 ne supporte canvas que grâce à une API qui plombe sérieusement les performances, ce pourquoi j'avais abandonné cette solution pour certains développement.
Maintenant il faut se tourner vers l'avenir, et l'utilisation de canvas devient vraiment inintéressante.
Merci Kazma, JJDai
@karamel
Messages postés
1710
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 août 2019
42 > jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
de rien :)

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.