我可以在图像映射区域元素上设置 onclick 事件吗？

Question

我想在区域元素上放置一个 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？

Answer 1

尝试：

<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 事件：

The tag defines an area inside an image-map (an image-map is an image with clickable areas).

编辑：你的坐标有点奇怪，因为它应该是每个顶点的一对（所以现在，你的多边形是一条线）

Answer 2

关注：

属性 href 是必须的，没有它 area-tag 什么都不做！
要添加点击事件，您需要阻止默认 href。

您的代码应如下开头：

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

Live example here.

Answer 3

根据您的意见，您只需要：

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

演示：

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

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

Answer 5

我通过@TimorEranAV 找到了这个问题 HTML map that displays text instead of linking to a 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>

此处的标题标签提供了向图像地图添加悬停文本（提示）的机会。

Answer 6

对您要监听的所有元素使用 class，并可选择使用行为属性：

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

然后将事件侦听器添加到 class 中的所有元素：

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

Answer 7

这是一个简单的：

<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="#">

我可以在图像映射区域元素上设置 onclick 事件吗？

Can I have an onclick event on a imagemap area element?

javascript

jquery

imagemap

onclick

area