[Résolu] Quelle syntaxe JQuery pour lire les coordonnées d'un usemap ?

Bonjour,
Je dispose d'une image avec un usemap qui fonctionne très bien :

<img id="image" src="mon_image.jpg" usemap="#maparea">
<map id="map" name="maparea">
	<area shape="rect" coords="651,439,705,508" title="...">
	<area shape="rect" coords="399,213,450,284" title="...">
	<area shape="rect" coords="481,231,527,299" title="...">
	<area ...">
</map>

J'ai besoin de faire des tracés sur cette image et donc j'ai essayé de l'inclure dans un canvas ou de positionner un canvas par-dessus.
Dans les deux cas, je perds la fonctionnalité du mapping. J'ai lu que Maps on Canvas are currently an open issue with HTML5. Issue #105.., en conséquence, j'accepte l'idée que ça ne puisse pas marcher.
J'ai ainsi imaginé de faire appel à JavaScript et JQuery pour exploiter un tableau de coordonnées et faire ce que le mapping fait en fonction de la position de la souris.
Pour créer le tableau, je peux :
1 : Soit modifier le codage de ma page (php) pour qu'au lieu du mapping actuel, elle génère directement un tableau JavaScript de coordonnées (sans doute le plus facile),
2 : Soit conserver la génération de ma page et de mon image avec le mapping actuel. Dans ce cas, j'ai besoin de lire dans le DOM toutes les coordonnées…

C'est ce deuxième point qui m'amène, car depuis ce matin je ne m'en sors pas du codage JQuery. Avec le code de test suivant :

$("area").attr("coords")

je récupère bien les coordonnées associées à la première instance de <area (651,439,705,508).
Avec

$("area").next().attr("coords")

je récupère bien les coordonnées de la ligne suivante (399,213,450,284), mais, et c'est là que je coince, je n'ai pas trouvé la syntaxe qui marche pour boucler sur la lecture de toutes les lignes suivantes (les exemples que j'ai trouvés ne m'ont pas inspiré).
Pouvez-vous m'aider ?
Modifié par goggi (15 Oct 2022 - 12:22)

Bonjour,

regarde du cote de https://api.jquery.com/jQuery.each/ pour boucler sur tes éléments area.

Cdt

edit : en gros ça donnerait:

$.each( $('area'), function(){
  console.log($(this).attr("coords"));// ce que tu veut faire ici
});

Modifié par gcyrillus (15 Oct 2022 - 12:41)