Mise en évidence des zones area sur une map html

Télécharger le projet
Commenter

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.
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 (macsou01)