begin process at 2012 05 28 13:55:25
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > MISE EN ÉVIDENCE DES ZONES AREA SUR UNE MAP HTML

MISE EN ÉVIDENCE DES ZONES AREA SUR UNE MAP HTML


 Information sur la source

Note :
Aucune note
Catégorie :Trucs & Astuces Classé sous :map, area, maphighlight Niveau :Initié Date de création :12/02/2011 Date de mise à jour :15/02/2011 11:30:12 Vu / téléchargé :3 125 / 205
Auteur : macsou01

Ecrire un message privé
Site perso
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Ce code Javascript, sous forme d'une classe nommée MapHighlight, permet de mettre en évidence les zones area d'une map HTML en affichant un rectangle personnalisable sur ces dernières.
Tous les types de zones sont gérés (rect, circle et poly).
Il est possible d'afficher les rectangles soit en passant la souris sur les zones, soit directement lors du chargement de la page.
On peut aussi choisir de laisser les zones visibles même une fois que l'on a quitté cette dernière avec la souris.
Cela semble marcher sur tous les navigateurs qui gèrent le Javascript et les maps HTML.

Pour toute remarque ou bug, n'hésitez pas à le dire dans les commentaires.

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
  • <script type="text/javascript" src="MapHighlight.js"></script>
  • <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
  • <title>MapHighlight</title>
  • </head>
  • <body>
  • <div>
  • <img src="image.png" width="400" height="400" usemap="#map" alt="image.png"/>
  • <map name="map" id="map">
  • <area shape="poly" class="poly" href="" title="poly" alt="poly" coords="1, 3, 73, 139, 73, 64"/>
  • <area shape="rect" class="rect" href="" title="rect" alt="rect" coords="333, 96, 363, 317"/>
  • <area shape="circle" class="circle" href="" title="circle" alt="circle" coords="171, 289, 72"/>
  • </map>
  • </div>
  • <script type="text/javascript">
  • /*
  • Pour donner un style à une zone area, il faut lui donner soit :
  • - un attribut id (avec le css correspondant)
  • - un attribut class (avec le css correspondant)
  • - un attribut style
  • Pour savoir à quoi coresspondent les paramètres de la classe, se référer au fichier MapHighlight.js.
  • */
  • var mh = new MapHighlight(document.getElementsByTagName('img')[0], true, true, true);
  • mh.highlight();
  • </script>
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
		<script type="text/javascript" src="MapHighlight.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
		<title>MapHighlight</title>
	</head>
	<body>
		<div>
			<img src="image.png" width="400" height="400" usemap="#map" alt="image.png"/>
			<map name="map" id="map">
				<area shape="poly" class="poly" href="" title="poly" alt="poly" coords="1, 3, 73, 139, 73, 64"/>
				<area shape="rect" class="rect" href="" title="rect" alt="rect" coords="333, 96, 363, 317"/>
				<area shape="circle" class="circle" href="" title="circle" alt="circle" coords="171, 289, 72"/>
			</map>
		</div>
		<script type="text/javascript">
			/*
			Pour donner un style à une zone area, il faut lui donner soit :
			 - un attribut id (avec le css correspondant)
			 - un attribut class (avec le css correspondant)
			 - un attribut style
			 
			Pour savoir à quoi coresspondent les paramètres de la classe, se référer au fichier MapHighlight.js.
			*/
			var mh = new MapHighlight(document.getElementsByTagName('img')[0], true, true, true);
			mh.highlight();
		</script>
	</body>
</html>

 Conclusion

Le code complet est fourni dans le ZIP.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

12 février 2011 22:13:46 :
Corrections de bugs suivant les conseils jdmcreator.
12 février 2011 22:18:34 :
Modif du ZIP.
13 février 2011 18:48:19 :
Modification de la fonction de calcul de l'épaisseur de la bordure d'une image.
13 février 2011 21:03:03 :
Améliorations diverses...
15 février 2011 11:30:13 :
Petite correction dans les calculs (plus précis). Ajout d'un paramètre pour choisir si les rectangles de mise en évidence doivent prendre en compte des redimensionnements éventuels de l'image.

 Sources du même auteur

Source avec Zip Source avec une capture FRACTALE DE MANDELBROT
Source avec Zip Source avec une capture CRÉER UN REFLET D'UNE IMAGE
Source avec Zip Source avec une capture DESSINER DES CERCLES/DISQUES/LIGNES EN JAVASCRIPT
GÉNÉRATEUR DE DÉGRADÉS
Toutes les sources de macsou01

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

SCRATCH AREA par heycraft
Source avec Zip Source avec une capture GOOGLE MAP API V3 CARTE, MARQUEUR, INFOWINDOWS par varfendell
Source avec Zip Source avec une capture TROUVER UN ITINÉRAIRE AVEC GOOGLE MAP par amrounix
Source avec Zip Source avec une capture GESTIONNAIRE DE CONTACTS LOCALISÉS SUR UNE CARTE GOOGLE MAP par nacedo57400
Source avec Zip Source avec une capture AUTRE MAP RPG AVEC UNE APPROCHE DIFFÉRENTE par rekam

Commentaires et avis

Commentaire de jdmcreator le 12/02/2011 18:08:41

Bonjour,

Je suis bien étonnée par ta source, seulement je ne l'a notterai pas tout de suite. Il y a beaucoup trop de bugs que je mettrais en évidence dans ce petit commentaire.

Première du côté des bugs, il y en a plusieurs

1- Si ton image n'a pas sa hauteur, largeur originale, les rectangles ne correspondent plus. Pour cela tu peux utiliser ce petit article de blog très intéressant que j'avais trouvé il y a près d'un mois : http://theodoreb.net/blog/redimensionner-une-imagemap-avec-javascript

2- Si ton image est en position:fixed, tes rectangles ne suivent plus.

3- Si ton image est dans un élément en position:absolute, tes données ne concordent pas.

4- Si ton image utilise la propriété CSS "CLIP" qui coupe l'image, tes rectangles ne sont pas coupés.

5- Il y a des fois des comportements étranges avec Safari que je ne saurais te détailler.

C'est sûr que le 4e bug est assez poussé, car peu de monde malheureusement utilise cette propriété, que j'adore. Seulement, les 3 premiers bugs doivent être absolument réglés. La prochaine étape sera de ne pas générer des formes uniquement rectangulaires, mais aussi circulaires et polygoniales ;)

Donc corrige-moi cela, ta source est excellente, bien pensé et cela en vaut la peine ;)

Commentaire de jdmcreator le 12/02/2011 18:14:45

PS Pour le point 1, la source au complet peut être trouvé ici : http://theodoreb.net/sites/theodoreb.net/files/imageremap.js_0.txt

Commentaire de jdmcreator le 12/02/2011 18:17:46

Et encore, content de revoir une autre de tes sources, je les adore ;)

Commentaire de macsou01 le 12/02/2011 18:48:31

Merci de tes commentaires !
Je vais essayer de voir tout ça !

Commentaire de macsou01 le 12/02/2011 18:57:45

Bon j'ai un peu mieux réfléchi (un peu :)).
Pour les points 2 et 3 et peut-être 5, c'est à cause du fait que je me cale sur la position de l'image pour placer mes rectangles. Mais je vois pas trop comment régler les problèmes...
Pour le point 1 ça me semble assez complexe !
Pour le point 4, c'est tout de même très spécifique !

Commentaire de jdmcreator le 12/02/2011 22:00:19

Pour le point 2, je crois qu'il suffirait de donner le même style au rectangle que l'image

Pour le point 1, je me suis complètement trompé. Oublie ce que j'y ai dit, car en fait, tu te fous un peu de la grosseur de l'image, ce qui t'importe c'est vraiment la position des <area>.  C'est à l'utilisateur de s'assurer de rediommensionner ses <MAP> s'il veut redimmensionner ses images ;)

Commentaire de macsou01 le 12/02/2011 22:17:47

Bon alors malgré le fait que tu te sois trompé sur le point 1, j'ai quand même fait les modifs en conséquence.
De plus, j'ai vu un autre bug, celui qui décalait les rectangles quand l'image avait une bordure.
Donc en résumé, j'ai corrigé les points 1, 3 et 5 (chez moi ça marche sous Safari maintenant).
Pour le point 4, je vois même pas comment régler le bug, et le propriété clip est assez rare sur le net.
Pour le point 2 je regarderai à l'occasion.
J'espère maintenant que ma source est un peu plus robuste et exempte de bugs !
Et encore merci pour tes conseils ;)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

peux-ton changer la map d'une image a coordonnées avec une fonction ? [ par frvfrvfrvfrv ] Salut &#224; tous,j'ai essayer de faire que l'on puissent changer la map d'une image par le biai de deux autre images.en activant une fonction, mais j DOM [ par PROTECTIONNISTE ] Salut,Ma source : var map=document.createElement("map");map.setAttribute("name","ctrlBox");mondiv.app map area - affichage des blocs div comprenant des liens [ par demnatis ] Bonjour a tous,Après avoir galéré des jours sur mon problème, je m'en remets a la communauté pour votre aide. Bien entendu, j'ai essayé de mettre en p rendre des area map actives (opacite) [ par skoric ] Bonjour a tous, Apres 2 semaines de recherches infructueuses, je me decide a demander [b]de l'aide.[/b] Deja a la base, en plus d'etre con, je debut google map + XML [ par jadoud ] bonsoir, dans le cadre d'un projet je suis besoin de mètre des marqueurs sur une map en utilisiez google map j'ai réussir a mètre des marqueurs stati API Google Maps les markers [ par steppp ] Bonjour, Je sollicite votre aide pour un problème qui m'étonne. Il me paraîtrait logique qu'il y ait une erreur très simple mais pourtant je réécris popup sur clic dans image dans infowindow Gogle Map passe en arrière-plan pourquoi ? [ par philou8 ] Bonjour, Voici deux scripts, dont seule la fonction load() diffère. Dans le premier cas je charge une liste déroulante d'icones jquery dans un simple rollover sur image + rollover [ par advitameternam ] Bonjour, J'ai fais une carte de france interactive. Sur celle ci plusieurs zone area avec un onmouseover et onmouseout Ensuite parmi les zones area i Comment effacer un Layer KML dans une Map ?? [ par SOFT60 ] Bonjour, pour faire apparaitre un tracé .kml sur une map j'utilise la fonction : [code=js]function kml() { var ctaLayer = new google.maps.KmlLayer('h Google map API V3 et lire un XML [ par ssd ] Bonjour, j'ai trouvé sur le web un script pour lire un fichier XML, cf-code mais je n'arrive pas a le faire tourner en local Merci. [code=html]@me


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,825 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)