Mise en évidence des zones area sur une map html

Soyez le premier à donner votre avis sur cette source.

Vue 5 537 fois - Téléchargée 440 fois

Description

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 / Exemple :


<!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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
45
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
28 juillet 2011

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 ;)
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
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 . C'est à l'utilisateur de s'assurer de rediommensionner ses <MAP> s'il veut redimmensionner ses images ;)
Messages postés
45
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
28 juillet 2011

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 !
Messages postés
45
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
28 juillet 2011

Merci de tes commentaires !
Je vais essayer de voir tout ça !
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Et encore, content de revoir une autre de tes sources, je les adore ;)
Afficher les 7 commentaires

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.