posso avere un evento onclick su un elemento dell'area imagemap

Vorrei mettere un evento onclick su un elemento area. Ecco il mio setup:posso avere un evento onclick su un elemento dell'area imagemap

<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>

Ho provato 2 diversi modi per avere un evento onclick. Innanzitutto ho provato questo:

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

Ho anche provato questo:

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

Né dell'opera sopra. Gli elementi dell'area supportano quanto sopra o supportano solo l'href?

Grazie in anticipo!

fonte

2015-04-28 danyo

Quale valore si fa a bisogno di ottenere? anche, hai un preventivo in più su "" 23.880.880,1510,1284 "" '? –

La zona che cerchi di fare clic non è selezionabile! :) –

è questo comportamento predefinito? – danyo

Attenzione:

attributo href è obbligatorio, senza di esso l'area-tag non fa nulla!
Per aggiungere un evento click, è necessario bloccare href predefinito.

Il codice dovrebbe iniziare come segue:

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

Live example here.

fonte

2015-04-28 14:10:25

ottima risposta Washington in aumento – danyo

Questa è un'ottima risposta ... Ma posso sapere che cosa ho bisogno di cambiare per visualizzare l'immagine al clic? domanda http://stackoverflow.com/questions/34046331/display-image-in-a-popup-same-window-onclick-of-a-particular-area-on-the-base –

Prova:

<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>

È souldn't desidera aggiungere onClick eventi sul territorio, la documentazione:

Il tag definisce un'area all'interno di un'immagine-map (un'immagine-map è un immagine con aree cliccabili).

Edit: le vostre coordinate sono un po 'strano dato che la sua supposta alle coppie di ogni vertici (quindi in questo momento, il vostro poligono è una linea)

fonte

2015-04-28 14:07:51 Pleasure

Ma mi piacerebbe per chiamare javascript onclick. Non è possibile? – danyo

Certo, basta aggiungere un ID sull'area su cui si desidera fare clic e usare '$ (" # id "). on (" clic ", funzione (e) { // DoSTG }); ' – Pleasure

sulla base di osservazioni, basta questo:

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

Demo:

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

fonte

2015-04-28 14:17:27

sua la forma che è il problema. Il tuo codice ha impostato una forma uguale al poligono ma ha solo 4 punti nell'attributo delle coordinate. Devi invece impostare la forma sul rettangolo.

Set forma = "rect" come questo:

<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>

fonte

2017-03-02 14:05:59 treeFan

Ho trovato questa domanda @TimorEranAV HTML map that displays text instead of linking to a URL ed è stato contrassegnato come duplicato, ma penso che quello che si aspettava è questo,

<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>

Qui il tag del titolo offre l'opportunità di aggiungere un testo hover (tip) alla mappa immagine.

fonte

2017-10-04 22:09:22 MLPJ

Utilizzare una classe per tutti gli elementi che si desidera ascoltare, e opzionalmente un attributo per il comportamento:

<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>

Allora aggiungi la tua listener di eventi a tutti gli elementi della 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 
}

Demo : https://codepen.io/weird_error/pen/xXPNOK

fonte

2017-10-04 22:25:07

Questo è semplice:

<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">

o per qualsiasi altro codice:

<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">

fonte

2017-10-05 15:16:50 TimorEranAV

Hai aggiunto uno snippet ma senza contenuto quindi niente "vedere" è render, forse puoi modificare il codice html per visualizzare esattamente l'esecuzione dello snippet cosa hai fatto – Kalamarico

posso avere un evento onclick su un elemento dell'area imagemap

risposta

Problemi correlati