Map et javascript

Version imprimable

Map et javascript

Salut,

J'ai une avec quelques cases, j'ai fait une map de cette image.

Code:

1
2
3
4
5
6
7
8
<img src="css/grille.png" usemap="#Map" class="img_grille" />
                        <map name="Map">
                          <area shape="rect" id="1" coords="32,54,58,80" href="#" alt="1" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="2" coords="60,55,84,78" href="#" alt="2" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="3" coords="86,54,112,79" href="#" alt="3" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="4" coords="113,54,139,79" href="#" alt="4" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="5" coords="140,54,166,79" href="#" alt="5" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                        </map>

Gr�ce � ce sujet : http://www.developpez.net/forums/d98...uee-image-map/ j'ai r�ussi � afficher une alert avec la valeur de la case.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<img src="css/grille.png" usemap="#Map" class="img_grille" />
                        <map name="Map">
                          <area shape="rect" id="1" coords="32,54,58,80" href="#" alt="1" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="2" coords="60,55,84,78" href="#" alt="2" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="3" coords="86,54,112,79" href="#" alt="3" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="4" coords="113,54,139,79" href="#" alt="4" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                          <area shape="rect" id="5" coords="140,54,166,79" href="#" alt="5" onclick="alert(document.getElementById('clicked_area').value=this.id);return false" />
                        </map>
 
 
<form name="recup_element" action="javascript:alert(document.getElementById('clicked_area').value)" method="get" />
			<input type="hidden" name ="clicked_area" id="clicked_area" value="" />
</form>

Voi�i donc mon probl�me, en premier lieu je ne comprend pas comment fonctionne ce formulaire.

Apr�s quelques essais j'ai pu d�terminer que l'alerte �tait celle des onclick, en effet cela fonctionne toujours si j'enl�ve le alert du form.

Bref, pour commencer j'aimerais bien comprendre comment fonctionne tout ce formulaire.

Merci !

20/12/2012, 20h51
SylvainPV

Bonjour,

Il y a plein de mauvaises pratiques dans ce code, comme les onclick � r�p�tition, l'affectation � l'int�rieur de l'alert ou encore le javascript dans le form action. Tout �a est � �viter !

Pour le fonctionnement, chaque onclick attribue � #clicked_area la valeur de l'id de l'area cliqu�e (1,2,3,4,5). Par contre sauf erreur il manque le code de soumission du formulaire dans ce que tu as montr�.

Si le but est d'envoyer une requ�te au serveur avec un ID diff�rent selon l'area cliqu�e, je vois pas pourquoi tu utilises du javascript. Il suffit de mettre un href diff�rent � chaque area.
20/12/2012, 22h30
Quantactique

Merci, je pense avoir compris ce que tu as expliqu�

En fait ce que je souhaite faire � la base c'est faire un loto, je souhaite s�lectionner 3 des 5 cases ici pr�sentes et ranger leurs valeurs dans un tableau.

J'ai mis des onclick � r�p�tition pour que lorsqu'on clique sur une des cases de la grille cela envoie la valeur dans un tableau, les onclick actuels sont juste l� pour v�rifier que chaque case � la bonne valeur.

Ce que je ne parviens pas � faire c'est envoyer ces donn�es et les r�cup�rer dans un tableau en JS (le script JS est dans un fichier � part).

Je veux bien une petite explication sur le commet je pourrais r�cup�rer la valeur d'un champ, les mettre dans le tableau devrait aller tout seul ensuite.

Merci beaucoup.

EDIT : Autant pour moi j'ai oubli� le bouton "envoyer" tu as raison, probl�me r�solu !
En revanche quand tu dit que l'utilisation r�p�t�e de onclick est mauvaise, que me conseillerais-tu d'utiliser � la place ? Car je ne voit vraiment pas comment je peux envoyer plusieurs valeurs en m�me temps...

Si tu veux r�cup�rer tes donn�es en Javascript pour un pr�-traitement avant l'envoi au serveur, tu peux faire comme �a en effet.

L'attribut onclick en HTML est la m�thode la moins pratique et flexible pour ajouter un �v�nement Javascript. Je te conseille d'utiliser les API addEventListener :

Code:

1
2
3
4
5
6
7
8
9
 
<img src="css/grille.png" usemap="#Map" class="img_grille" />
                        <map id="map" name="Map">
                          <area shape="rect" id="1" coords="32,54,58,80" href="#" alt="1" />
                          <area shape="rect" id="2" coords="60,55,84,78" href="#" alt="2"  />
                          <area shape="rect" id="3" coords="86,54,112,79" href="#" alt="3"  />
                          <area shape="rect" id="4" coords="113,54,139,79" href="#" alt="4"  />
                          <area shape="rect" id="5" coords="140,54,166,79" href="#" alt="5"  />
                        </map>

Code:

1
2
3
4
5
6
7
8
 
var areas = document.querySelectorAll("#map area");
for (var i = 0; i < areas.length; ++i) {
  var area = areas[i];
  area.addEventListener("click",function(event){
       document.getElementById('clicked_area').value = this.id;
  });
}