我可以在imagemap区域元素上有onclick事件吗

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

我试过2种不同的方式来进行onclick事件。首先我想这：

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

我也试过这样：

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

无论是上述的工作。区域元素是否支持上述内容，还是只支持href？

提前致谢！

来源

2015-04-28 danyo

哪个值你需要得到什么？ ''2318,480,1510,1284“''' –

您试图点击的区域不可点击！:) –

是这种默认行为吗？ – danyo

关注：

属性HREF是强制性的，没有它，区域标签什么也不做！
要添加点击事件，您需要阻止默认的href。

您的代码应该开始如下：

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

Live example here.

来源

2015-04-28 14:10:25

伟大的答案华盛顿upvoted – danyo

这是一个很好的答案......但我可以知道我需要改变点击显示图像？请参阅此问题http://stackoverflow.com/questions/34046331/display-image-in-a-popup-same-window-onclick-of-a-particular-area-on-the-base –

尝试：

<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要添加的区域onClick事件，文档：

标签定义图像映射内部的区域（图像映射是一种图像与可点击区域）。

编辑：您COORDS是因为有点怪异它应该每个顶点的夫妇（所以现在，你的多边形线）

来源

2015-04-28 14:07:51 Pleasure

但是我想打电话给一些javascript onclick。这是不可实现的吗？ – danyo

当然，只需在你想点击的区域上添加一个id并使用'$（“＃id”）。on（“click”，function（e）{ // DoSTG }）;' – Pleasure

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

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

演示：

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

来源

2015-04-28 14:17:27

它这就是问题的形状。您的代码已设置形状等于多边形，但坐标属性中只有4个点。您需要将形状设置为矩形。

设置形状=“矩形”这样的：

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

来源

2017-03-02 14:05:59 treeFan

我发现这个问题由@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>

这里标题标签给出了将悬停文本（提示）添加到图像映射的机会。

来源

2017-10-04 22:09:22 MLPJ

使用一个类你想要听的所有元素及任选的行为属性：

<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

来源

2017-10-04 22:25:07

这是一个简单的：

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

来源

2017-10-05 15:16:50 TimorEranAV

你已经添加了一个片段，但没有内容所以没有“看到”是呈现，也许你可以修改HTML代码，以精确查看运行的代码段你做了什么 – Kalamarico

我可以在imagemap区域元素上有onclick事件吗

回答

相关问题