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;
  });
}