Czy mogę mieć zdarzenie onclick elementu elementu imagemap

Chciałbym umieścić zdarzenie onclick na elemencie obszaru. Oto moja konfiguracja:Czy mogę mieć zdarzenie onclick elementu elementu 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>

Próbowałem 2 różne sposoby na zdarzenie onclick. Po pierwsze próbowałem to:

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

Próbowałem też tak:

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

Żadne z powyższych prac. Czy elementy obszaru obsługują powyższe, czy też obsługują tylko href?

Z góry dziękuję!

Źródło

2015-04-28 danyo

których wartość nie trzeba dostać? również masz dodatkowy cytat na temat "2318,480,1510,1284" "? –

Strefa, którą próbujesz kliknąć, nie jest klikalna! :) –

to domyślne zachowanie? – danyo

czujność:

Atrybut href jest obowiązkowe, bez niego znacznik obszaru nic nie robi!
Aby dodać wydarzenie kliknięcia, musisz zablokować domyślny href.

Kod powinien rozpocząć się następująco:

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

Live example here.

Źródło

2015-04-28 14:10:25

świetna odpowiedź Waszyngton wzniósł górę – danyo

To wspaniała odpowiedź ... Ale czy mogę wiedzieć, co muszę zmienić, aby wyświetlać obraz po kliknięciu? pytanie http://stackoverflow.com/questions/34046331/display-image-in-a-popup-same-window-onclick--particular-area-on-the-base –

Spróbuj:

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

Ty souldn't chcesz dodać onClick wydarzenia na obszarze, dokumentacja:

Znacznik określa obszar wewnątrz obrazu-mapy (obraz-map jest obraz z klikalnymi obszarami).

Edit: twoje koordy są nieco dziwne, ponieważ jej podobno par każdego z wierzchołków (tak teraz, Twój wielokąt jest linia)

Źródło

2015-04-28 14:07:51 Pleasure

Ale chciałbym Aby wywołać niektóre javascript onclick.Czy to nie jest możliwe? – danyo

Oczywiście po prostu dodaj identyfikator w obszarze, który chcesz kliknąć i użyj '$ (" # id "). on (" kliknij ", funkcja (e) { // DoSTG }); ' – Pleasure

oparciu o komentarze, po prostu trzeba to:

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

Demo:

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

Źródło

2015-04-28 14:17:27

Jego kształt, który jest problem. Twój kod ma ustawiony kształt równy wielokątowi, ale ma tylko 4 punkty w atrybucie współrzędnych. Zamiast tego musisz ustawić kształt na prostokąt.

Set kształt = "rect" tak:

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

Źródło

2017-03-02 14:05:59 treeFan

Znalazłem to pytanie @TimorEranAV HTML map that displays text instead of linking to a URL i został oznaczony jako duplikat, ale myślę, że to, co spodziewałem się tego,

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

Tutaj znacznik tytułu daje możliwość dodania tekstu wskaźnika (podpowiedzi) do mapy obrazu.

Źródło

2017-10-04 22:09:22 MLPJ

Użyj klasę dla wszystkich elementów, które chcesz nasłuchiwać i ewentualnie atrybut dla zachowania:

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

Następnie dodać detektory zdarzeń do wszystkich elementów w klasie:

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

Źródło

2017-10-04 22:25:07

to proste:

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

lub z jakiegokolwiek innego kodu:

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

Źródło

2017-10-05 15:16:50 TimorEranAV

Dodałeś fragment, ale bez zawartość, więc nic "do zobaczenia" to renderowanie, może możesz zmodyfikować kod HTML, aby dokładnie wyświetlać urywek, co zrobiłeś – Kalamarico

Czy mogę mieć zdarzenie onclick elementu elementu imagemap

Odpowiedz

Powiązane problemy