web-dev-qa-db-fra.com

puis-je avoir un événement onclick sur un élément de la carte d'image

Je voudrais mettre un événement onclick sur un élément area. 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 façons différentes d'avoir un événement onclick. Tout d'abord j'ai essayé ceci:

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

J'ai aussi essayé ceci:

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

Aucun des travaux ci-dessus. Les éléments area supportent-ils ce qui précède ou ne supportent-ils que le href?

Merci d'avance!

javascriptjqueryonclickareaimagemap
21
danyo

Faites attention:

  1. L'attribut href est obligatoire, sans lui la balise area ne fait rien!

  2. Pour ajouter un événement click, 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.

25
user4227915

En fonction de vos commentaires, vous avez juste besoin de ceci:

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

Démo:

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

2
Pedro Lobito

Essayez:

<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 des événements onClick sur une zone, documentation: 

La balise définit une zone dans une image-map (une image-map est une image avec des zones cliquables).

Edit: vos coordonnées sont un peu bizarres car elles sont supposées correspondre aux couples de chaque sommet (donc maintenant, votre polygone est une ligne)

1
Jules

C'est la forme qui fait problème. Votre code a défini une forme égale à polygone mais ne contient que 4 points dans l'attribut de coordonnées. Vous devez plutôt définir la forme sur rectangle. 

Définissez shape = "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>

1
treeFan

J'ai trouvé cette question de @ TimorEranAV La carte HTML qui affiche du texte au lieu de créer un lien vers une URL Et qui a été marquée comme étant en double,

<html>
<head>
 <title> Program - Image Map</title>
</head>
<body>


 <img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="Sun.htm" alt="Sun" title = "Sun">
  <area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">

</map>

</body>
</html>

Ici, la balise de titre donne la possibilité d’ajouter un texte de survol (tip) à la carte d’image.

0
MLPJ

Utilisez une classe pour tous les éléments que vous souhaitez écouter et éventuellement un attribut pour le comportement:

<map name="primary">
  <area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
  <area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>

Ajoutez ensuite vos écouteurs d'événement à tous les éléments de la classe:

const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;

popable.forEach(elem => elem.addEventListener('click', togglePopup));

function togglePopup(e) {
  popup.innerText = e.target.dataset.text;

  // If  clicking something else, first restore '.hidden' to popup so that toggle will remove it.
  if (lastClicked !== e.target) {
    popup.classList.add('hidden');
  }
  popup.classList.toggle('hidden');
  lastClicked = e.target;  // remember the target
}

Démo: https://codepen.io/weird_error/pen/xXPNOK

0
weird_error