navegador - llamar funcion javascript desde boton
¿Puedo tener un evento onclick en un elemento del área del mapa de imágenes? (7)
Me gustaría poner un evento onclick en un elemento de área. He aquí mi arreglo:
<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>
He intentado 2 maneras diferentes de tener un evento onclick. En primer lugar he intentado esto:
$(".blue").click( function(event){
alert(''test'');
});
También he intentado esto:
function myFunction() {
alert(''test'');
}
Ninguno de los trabajos anteriores. ¿Los elementos de área son compatibles con lo anterior, o solo admiten tener un href?
¡Gracias por adelantado!
Basado en tus comentarios, solo necesitas esto:
$("#image").click( function(){
alert("clicked");
//your code here
});
Manifestación:
Encontré esta pregunta en el mapa HTML de @TimorEranAV que muestra texto en lugar de vincular a una URL y se marcó como duplicado, pero creo que lo que esperaba era esto,
<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>
Aquí, la etiqueta del título brinda la oportunidad de agregar un texto flotante (punta) al mapa de imagen.
Es la forma que es el problema. Su código ha establecido una forma igual a un polígono pero solo tiene 4 puntos en el atributo de coordenadas. Es necesario establecer la forma de rectángulo en su lugar.
Establecer forma = "rect" de esta manera:
<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>
Esto es muy 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="#">
Presta atención:
El atributo href es obligatorio, ¡sin él la etiqueta de área no hace nada!
Para agregar un evento de clic, deberás bloquear el href predeterminado.
Su código debe comenzar de la siguiente manera:
$(".blue").on("click", function(e){
e.preventDefault();
/*
your code here
*/
});
Tratar :
<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>
No debería querer agregar eventos onClick en el área, documentación:
La etiqueta define un área dentro de un mapa de imagen (un mapa de imagen es una imagen con áreas en las que se puede hacer clic).
Edit: tus coords son un poco raros ya que se supone que son las parejas de cada vértice (así que ahora, tu polígono es una línea)
Use una clase para todos los elementos que desee escuchar y, opcionalmente, un atributo para el comportamiento:
<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>
Luego agregue sus oyentes de eventos a todos los elementos de la clase:
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
}
Demostración: https://codepen.io/weird_error/pen/xXPNOK