Puis-je avoir un événement onclick sur un élément de zone imageap

Je voudrais mettre un événement onclick sur un élément de zone. Voici ma configuration:

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" > <map name="Map"> <area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#"> </map>

J'ai essayé 2 manières différentes d'avoir un événement onclick. Tout d'abord, j'ai essayé ceci:

 $(".blue").click( function(event){ alert('test'); });

J'ai également essayé ceci:

 function myFunction() { alert('test'); }

Aucun des travaux ci-dessus. Les éléments de la zone sont-ils compatibles avec les éléments ci-dessus ou ne supportent-ils que le fait d'avoir un href?

Merci d'avance!

Faites attention:

L'attribut href est obligatoire, sans lui la zone-étiquette ne fait rien!
Pour ajouter un événement de clic, vous devez bloquer href par défaut.

Votre code devrait commencer comme suit:

 $(".blue").on("click", function(e){ e.preventDefault(); /* your code here */ });

Exemple en direct ici.

Selon vos commentaires, vous avez juste besoin de ceci:

 $("#image").click( function(){ alert("clicked"); //your code here });

Demo:

http://codepen.io/tuga/pen/waBQBZ

Essayer :

 <img src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map"> <map name="map"> <area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile"> </map>

Vous ne voudriez pas ajouter les événements onClick sur la zone, documentation:

La balise définit une zone à l'intérieur d'une image-carte (une image-carte est une image avec des zones cliquables).

Edit: vos coords sont un peu bizarre puisqu'il est supposé que les couples de chaque sommet (alors maintenant, votre polygone est une ligne)

C'est la forme qui est le problème. Votre code a défini une forme égale au polygone, mais ne comporte que 4 points dans l'attribut des coordonnées. Vous devez définir la forme au rectangle à la place.

Définissez la forme = "rect" comme ceci:

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" > <map name="Map"> <area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#"> </map>