Discussion :

[pausg]

Bonjour à tous,

pour un projet, j'ai un "questionnaire" qui est constitué d'une liste déroulante et d'une image map.

J'ai créé mon image map, et j'essaye maintenant de récupérer la valeur de la zone cliquée et de la transmettre au formulaire. Etant débutant en javascript je m'y perds un peu.

Quelqu'un peut-il me mettre sur la bonne piste?

Merci d'avance!

[SpaceFrog]

je ne savais même pas qu'un area pouvait avoir une valeur ...

[pausg]

Excuse moi, en effet mes mots étaient très mal choisis et portent à confusion.

Ce que je voudrais récupérer c'est le nom de l'area (ou à défaut ses coordonnées).

[SpaceFrog]

Code :

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

onclick= "alert(this.name)"

[pausg]

Oui comme avec ca je peux l'afficher mais je voudrais la récupérer pour la transmettre à un formulaire, et je voudrais que ca soit "invisible" pour l'utilisateur.

[SpaceFrog]

un input hidden

dans ton form:

Code :

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

<input id='clicked_area' name='clicked_area' type='hidden' value='' />

et pour l'area

Code :

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

onclick="document.getElementById('clicked_area').value=this.name"

[pausg]

Merci je teste ca de suite!

[pausg]

Alors je fais un print_r dans mon contrôleur pour vérifier les données envoyées par le formulaire. Il a bien l'air de se passer quelques chose, mais ca ne marche pas tout à fait car il me met "undefined" dans clicked_area.

Sais tu d'ou vient le problème?

[SpaceFrog]

on peut voir le code html du map ?

[pausg]

le voila:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<map name="court" id="court">
<area shape="rect" name="net" coords="136,22,496,54" href="" target="_self" />
<area shape="rect" name="topleft" coords="118,105,251,188" onclick="document.getElementById('clicked_area').value=this.name" />
<area shape="rect" name="topmid" coords="252,105,383,188" onclick="document.getElementById('clicked_area').value=this.name" />
<area shape="rect" name="topright" coords="387,105,515,188" onclick="document.getElementById('clicked_area').value=this.name" />
<area shape="rect" name="midleft" coords="93,193,242,303" onclick="document.getElementById('clicked_area').value=this.name" target="_self" />
<area shape="rect" name="midmid" coords="245,193,393,303" href="" target="_self" />
<area shape="rect" name="midright" coords="397,193,542,303" href="" target="_self" />
<area shape="rect" name="botleft" coords="65,306,233,438" href="" target="_self" />
<area shape="rect" name="botmid" coords="236,306,402,438" href="" target="_self" />
<area shape="rect" name="botright" coords="403,306,565,438" href="" target="_self" />
<area shape="rect" name="outleft" coords="9,143,54,326" href="" target="_self" />
<area shape="rect" name="outbot" coords="234,450,403,487" href="" target="_self" />
<area shape="rect" name="outright" coords="579,143,624,326" href=""  />
</map>
 
echo $html->image('courtparts.JPG', array('width' => '633', 'height' => '501', 'usemap' => '#court'));

[Bovino]

Code :

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

onclick="document.getElementById('clicked_area').value=this.name";return false;

[pausg]

Non ca doit être autre chose, avec le return false mon print_r ne me donne plus rien...

[SpaceFrog]

Code :

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

onclick="document.getElementById('clicked_area').value=this.name; return false;"

dans le onclick le return false

[Bovino]

Code :

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

onclick="document.getElementById('clicked_area').value=this.name; return false;"

dans le onclick le return false

[pausg]

Oups en effet. Ça envoi toujours undefined.

[SpaceFrog]

Code :

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

<area shape="rect" name="topleft" coords="118,105,251,188" onclick="document.getElementById('clicked_area').value=this.name"" />

enlève le " en trop je pense que cela ira mieux sans ...

[pausg]

Désolé je l'avais déjà enlevé celui la.
Je récupère toujours "undefined", que ca soit avec ou sans le "return false;"

[SpaceFrog]

Code :

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

href=<?php $this->Form->submit()?>  />

heu tu essayes de faire quoi là ???

[pausg]

Oups c'était juste un vieux test que j'ai oublié de dégager. Je vais éditer le post pour que ca n'apparaisse plus.

[SpaceFrog]

a priori il ne comprend pas le this.name au niveau de l'area ???
par contre ça passe avec le name

voici donc qui fonctionne:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
<img style="height:600px; width:800px;" usemap="#court" />
<map name="court" id="court">
<area shape="rect" name="net" title="net" coords="136,22,496,54" href="" target="_self" />
<area shape="rect" name="topleft" href="topleft" coords="118,105,251,188" onclick="document.getElementById('clicked_area').value=this.href;return false" />
<area shape="rect" name="topmid" href="topmid" coords="252,105,383,188" onclick="document.getElementById('clicked_area').value=this.href;return false;" />
<area shape="rect" name="topright" href='topright' coords="387,105,515,188" onclick="document.getElementById('clicked_area').value=this.name" />
<area shape="rect" name="midleft" href="midleft" coords="93,193,242,303" onclick="document.getElementById('clicked_area').value=this.name" target="_self" />
<area shape="rect" name="midmid" coords="245,193,393,303" href="" target="_self" />
<area shape="rect" name="midright" coords="397,193,542,303" href="" target="_self" />
<area shape="rect" name="botleft" coords="65,306,233,438" href="" target="_self" />
<area shape="rect" name="botmid" coords="236,306,402,438" href="" target="_self" />
<area shape="rect" name="botright" coords="403,306,565,438" href="" target="_self" />
<area shape="rect" name="outleft" coords="9,143,54,326" href="" target="_self" />
<area shape="rect" name="outbot" coords="234,450,403,487" href="" target="_self" />
<area shape="rect" name="outright" coords="579,143,624,326" title="submit" href="javascript:document.forms['foo'].submit();" />
</map>
 
<form name="foo" action="javascript:alert(document.getElementById('clicked_area').value)" method="get" />
<input type="hidden" name ="clicked_area" id="clicked_area" value="" />
</form>
 
</body>
 
</html>