Могу ли я иметь событие onclick на элементе области imagemap

Я хотел бы поместить событие onclick в элемент области. Вот моя настройка:

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

Я попробовал два разных способа иметь событие onclick. Во-первых, я пробовал это:

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

Я также пробовал это:

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

Ни одна из вышеперечисленных работ не работает. Удерживают ли элементы области выше или поддерживают только href?

Спасибо заранее!

Ответы

Ответ 1

Обратите внимание:

  • Атрибут href является обязательным, без него тег области ничего не делает!

  • Чтобы добавить событие click, вам нужно заблокировать значение по умолчанию href.

Ваш код должен начинаться следующим образом:

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

Живой пример здесь.

Ответ 2

Основываясь на ваших комментариях, вам просто нужно:

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

Демо:

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

Ответ 3

Попробуйте:

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

Вы не хотите добавлять события onClick в область, документацию:

Тег определяет область внутри карты изображения (изображение-карта - это изображение с интерактивными областями).

Изменить: ваши координаты немного странны, так как они предполагаются парами каждой вершины (так что прямо сейчас, ваш многоугольник - это линия)

Ответ 4

Его форма, что проблема. Ваш код имеет форму, равную полигону, но имеет только 4 точки в атрибуте координат. Вместо этого вам нужно установить форму на прямоугольник.

Установите shape = "rect" следующим образом:

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

Ответ 5

Я нашел этот вопрос @TimorEranAV HTML-карта, отображающая текст вместо ссылки на URL и был отмечен как дубликат, но я думаю, что он ожидал это,

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

Здесь тег title дает возможность добавить текст наведения (подсказка) к карте изображения.

Ответ 6

Используйте класс для всех элементов, которые вы хотите прослушать, и необязательно атрибут для поведения:

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

Затем добавьте слушателей событий ко всем элементам класса:

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
}

Демо: https://codepen.io/weird_error/pen/xXPNOK

Ответ 7

Это простой:

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