puis-je avoir un événement onclick sur un élément de zone imagemap
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');
}
Aucune de ces travaux. Est-ce que les éléments de zone supportent ce qui précède, ou est-ce qu'ils supportent seulement avoir un href?
Merci d'avance!
7 réponses
attention:
attribut href est obligatoire, sans lui l'étiquette de zone ne fait rien!
Pour ajouter un événement de clic, vous aurez besoin de bloquer par défaut href.
Votre code devrait commencer comme suit:
$(".blue").on("click", function(e){
e.preventDefault();
/*
your code here
*/
});
basé sur vos commentaires, vous avez juste besoin de ceci:
$("#image").click( function(){
alert("clicked");
//your code here
});
Démo:
Essaie :
<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 souldn voulez pas ajouter onClick événements sur la zone, de la documentation :
l'étiquette 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 bizarres puisque c'est supposé pour les couples de chaque vertex (donc en ce moment, votre polygone est une ligne)
Sa forme qui est le problème. Votre code a défini une forme égale au polygone mais n'a que 4 points dans l'attribut des coordonnées. Vous devez définir la forme de rectangle à la place.
Définir 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>
j'ai trouvé cette question par @TimorEranAV HTML carte qui affiche le texte au lieu de le relier à une URL et a été marqué comme dupliqué, mais je pense que ce qu'il attendait est ceci,
<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 l'occasion d'ajouter un texte de curseur(tip) à la carte d'image.
utilisez une classe pour tous les éléments que vous voulez écouter, et optionnellement 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>
puis ajoutez vos écouteurs d'événements à 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
}
Ceci est un simple:
<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#"><area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">