Discussion :

[webpxis]

Bonjour à tous,

Je suis entrain de réaliser un projet éducatif pour une école et j'ai un soucis de JS. J'ai une carte de france classique auquel j'ai ajouter des zones réactive avec dreamweaver, jusque la pas de soucis.

Mon problème c'est que quand je clique sur un des points d'une ville de france, par exemple Paris, par dessus la carte une tite info box devrait venir s'afficher avec des informations complémentaires (nombre d'habitant, superficie...)

et c'est la ou je bloque, je vois pas du tout comment faire... sachant également qu'il faut le faire pour une trentaine de ville j'aimerais bien une idée ou un modèle de fonction pour base en JS.

Merci d'avance

[Watilin]

Salut !

Je te propose une solution – en prêcheur infatigable que je suis – à base de gestionnaires d’évènements.

Les gestionnaires d’évènements sont des fonctions que tu déclares dans ton script et que tu attaches à un évènement HTML, sans avoir besoin d’écrire directement dans le HTML. En plus, ils te permettent de faire de la délégation, c’est-à-dire de définir une fonction qui réagit aux clics sur chaque area en surveillant uniquement la map.

Prenons le fragment HTML suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<img src="carte.jpg" alt="" usemap="#carte" />
<map id="carte" name="carte">
	<area id="area_1" shape="rect" coords="100,100,200,200"
		nohref="nohref" title="machin" />
	<area id="area_2" shape="circle" coords="150,200,25"
		nohref="nohref" title="truc" />
	<area id="area_3" shape="circle" coords="250,150,10"
		nohref="nohref" title="bidule" />
</map>

Note l’attribut nohref qui permet de ne pas être gêné par le comportement par défaut des clics sur area (un changement de page), le title qui permet d’afficher une infobulle et l’id qui aura son importance dans la suite.

Pour gérer un évènement, la syntaxe dépend du navigateur, la faute à – devinez – MSIE.
Pour les navigateurs standard :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

maCarte.addEventListener('click', maFonction, false);

le false concerne une obscure histoire de capture d’évènements dont je ne parlerai pas ici.

Pour MSIE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

maCarte.attachEvent('onclick', maFonction);

Ensuite il faut pouvoir récupérer l’objet concerné par l’évènement. Là encore, il y a deux syntaxes…
Standard :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monEvent.target

IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monEvent.srcElement

Avec d’autres élements HTML, il faudrait filtrer les clics « parasites », sur l’objet surveillé mais en dehors des objets voulus. Heureusement, la map est un peu spéciale : elle « n’existe pas » en dehors des zones définies par les area.


Vient le moment où l’id va se rendre utile : comme on a récupéré l’objet cliqué, on peut avoir son id, et comme on a prévu le coup, on cherche dans une structure de données – le mot peut faire peur mais ça peut être un simple hash – préparée à l’avance, les infos correspondantes à l’id.
Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var Infos = {
	area_1: 'donnees de la ville 1',
	area_2: 'donnees de la ville 2',
	// etc.
}
 
// ...
var id = ev.target.id;
var donnees = Infos[id];

Voilà pour les explications. J’ai fait un petit zip qui étoffe un peu, en tentant d’être cross-browser, je te le mets ici et je reste dispo pour les explications.