我能在imagemap区域元素上添加onclick事件吗？

Question

我能在imagemap区域元素上添加onclick事件吗？

32

我想在一个区域元素上添加一个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');
}

以上两种方法都不起作用。area元素是否支持上述方法，还是只支持href属性？

- danyo

你需要获取哪个值？另外，"2318,480,1510,1284"" 这段代码中有多余的引号吗？ - Pedro Lobito

您尝试点击的区域不可点击！ :) - Radonirina Maminiaina

这是默认行为吗？ - danyo

@PedroLobito 我需要在点击时调用一个 JavaScript 函数，这个额外的引号是一个打字错误。 - danyo

只需要这些吗？你不需要用户点击的坐标吗？ - Pedro Lobito

7个回答

11

问题在于形状。你的代码将shape设置为polygon，但是坐标属性中只有4个点。你需要改为将shape设置为rectangle。

像这样设置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>

- treeFan

这实际上回答了OP的问题，而且不需要jquery。 - Bill

3

为所有要监听的元素使用一个类，并可选择使用属性来控制行为：

<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

- weird_error

当有一个 href 时，需要使用 e.preventDefault()。 - Clemens Tolboom

2

根据您的评论，您只需要这个：

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

Demo:

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

- Pedro Lobito

2

这是一个简单的例子：

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

Or for any other code:

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

- Timor

1

您已添加了代码片段，但没有内容，因此没有任何“可见”的内容被呈现出来，也许您可以修改HTML代码以确切地查看运行的代码片段。 - Kalamarico

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事件，文档说明：

标签定义图像映射内的一个区域（图像映射是带有可点击区域的图像）。

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

- Jules

1

但我想在点击时调用一些JavaScript。这不可行吗？ - danyo

1

当然，只需在您想要单击的区域添加一个ID，并使用$("#id").on("click", function(e){ //DoSTG });。 - Jules

0

我发现@TimorEranAV的这个问题以文本形式显示而不是链接到URL的HTML映射被标记为重复，但我认为他期望的是这个，

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

在这里，标题标签提供了向图像映射添加悬停文本(提示)的机会。

- MLPJ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user4227915 · Accepted Answer

请注意：

属性 href 是必需的，没有它，area 标签将无效！
要添加点击事件，您需要阻止默认的 href。

你的代码应该如下所示：

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

这里有一个实时示例。