[DOM] connaitre l'objet DOM appelant une fonction javascript

Version imprimable

31/08/2007, 16h28
HPmeteo

[DOM] connaitre l'objet DOM appelant une fonction javascript

Bonjour,

Je souhaite utiliser l'élément HTML qui appelle un événement JS. Quel peut être l'objet de javascript qui contient cet élément?

Dans mon cas, l'élément appelant est une entrée <area> d'un objet <map>. En fait, je veux plutôt connaître l'objet <img> qui utilise le <map>.

Comme je ne suis pas sûr que mon idée soit faisable ou la plus sensée, j'explique un peu mon problème. Dans ma page HTML, j'ai 2 balises <img> assez semblables dont l'adresse href est, disons, carte1.png et carte2.png. Chaque balise <img> utilise un même objet <map> avec des zones cliquables déclenchant un appel à une fonction javascript. Dans la fonction, j'ai besoin de savoir si le clic vient de carte1.png ou carte2.png (les balises <img> sont référencées par l'attribut name). J'ai cherché dans les propriétés et méthodes de l'objet window ou document, mais rien ne va.

mon code simplifié :
...
<img name="carte1" href="carte1.png" usemap="#points">
<img name="carte2" href="carte2.png" usemap="#points">
...
<map name="point">
<area shape="circle" coord="..." onclick="afficher();">
<area ...>
</map>
...

Il est vrai que le plus simple serait d'utiliser deux objets <map> différents, mais il y a une très grande symétrie entre les 2 images et je devrais dupliquer le même code <map>...<area>...</map>. Si je peux éviter, je préfère.

Merci pour l'aide.

pour commencer, mais je pense que cela doit provenire d'une erreur d'étourderie en rédigeant ??? une balise img à un src et non un href ...

Je n'ai rien trouvé au niveau du map qui permette de recupérer l'image qui porte le map alors j'ai bidouillé ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 </head> <script type='text/javascript'> var clickedPic='' </script> <body> <p> <img onmousedown="clickedPic=1" src="image1.jpg" usemap="#FPMap0" width="124" height="108"> <img onmousedown="clickedPic=2" src="image2.jpg" usemap="#FPMap0" width="124" height="108"></p> <map name="FPMap0"><area href="#" shape="circle" coords="66, 49, 49" onclick="alert(clickedPic)"></map> </body> </html>

Citation:
Envoyé par SpaceFrog
pour commencer, mais je pense que cela doit provenire d'une erreur d'étourderie en rédigeant ??? une balise img à un src et non un href ...

Je n'ai rien trouvé au niveau du map qui permette de recupérer l'image qui porte le map alors j'ai bidouillé ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 </head> <script type='text/javascript'> var clickedPic='' </script> <body> <p> <img onmousedown="clickedPic=1" src="image1.jpg" usemap="#FPMap0" width="124" height="108"> <img onmousedown="clickedPic=2" src="image2.jpg" usemap="#FPMap0" width="124" height="108"></p> <map name="FPMap0"><area href="#" shape="circle" coords="66, 49, 49" onclick="alert(clickedPic)"></map> </body> </html>
Oui, merci, un collègue m'a suggéré la même chose. J'utilise onMouseover en initialisant une variable globale (le clickedPic, ici) et reprend cette variable dans ma fonciton JS. Ca marche bien.
J'ai aussi essayé rapidement d'utiliser la position du curseur avec event.x/y, mais s'il y a un défilement de la page, ça ne marche plus. Une piste, peut-être.

Enfin, quand même, ça n'existe pas, une propiété JS qui donne le nom de la balise HTML (ou une sorte de position dans le code ou le DOM) qui lance l'événement?

Encore merci.
A bientôt.

ps: oui, src, pas href...

01/09/2007, 20h48
javatwister

[event].target (Moz et compagnie) ou event.srcElement (IE) suffisent en général;
02/09/2007, 18h03
SpaceFrog

j'ai pas réussi à implémenter ton target oui scrElement JT ...
il me retourne la page :(