Récupérer la valeur cliquée d'une image map

Version imprimable

12/10/2010, 05h58
pausg

Récupérer la valeur cliquée d'une image map

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!
12/10/2010, 08h24
SpaceFrog

je ne savais même pas qu'un area pouvait avoir une valeur ...
12/10/2010, 08h49
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).
12/10/2010, 09h19
SpaceFrog

Code:

onclick= "alert(this.name)"
12/10/2010, 09h44
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.
12/10/2010, 09h57
SpaceFrog

un input hidden

dans ton form:

Code:

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

et pour l'area

Code:

onclick="document.getElementById('clicked_area').value=this.name"
12/10/2010, 10h03
pausg

Merci je teste ca de suite!
12/10/2010, 10h32
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?
12/10/2010, 10h43
SpaceFrog

on peut voir le code html du map ?

le voila:

Code:

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

12/10/2010, 11h10
Bovino

Code:

onclick="document.getElementById('clicked_area').value=this.name";return false;
12/10/2010, 11h44
pausg

Non ca doit être autre chose, avec le return false mon print_r ne me donne plus rien...
12/10/2010, 11h45
SpaceFrog

Code:

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

dans le onclick le return false
12/10/2010, 11h50
Bovino

Citation:

Envoyé par SpaceFrog

Code:

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

dans le onclick le return false

:oops:
12/10/2010, 11h54
pausg

Oups en effet. Ça envoi toujours undefined.
13/10/2010, 08h37
SpaceFrog

Code:

<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 ...
13/10/2010, 08h43
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;"
13/10/2010, 08h45
SpaceFrog

Code:

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

heu tu essayes de faire quoi là ???
13/10/2010, 08h58
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.

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:

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>

13/10/2010, 09h38
pausg

En effet ça marche merci beaucoup!
Je vais juste faire un petit traitement pour ne pas récupérer une url complète mais juste le nom de la zone.

Merci encore de ton aide!