我可以在imagemap area元素上有onclick事件吗？
我可以在imagemap area元素上有onclick事件吗？
提问于 2015-04-28 21:59:25
我想在一个area元素上放一个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？
回答 4
Stack Overflow用户
发布于 2017-03-02 22:06:00
形状才是问题所在。您的代码已将形状设置为多边形，但在坐标属性中只有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>Stack Overflow用户
发布于 2017-10-05 06:25:08
为要侦听的所有元素使用一个类，并可选择为行为使用一个属性：
<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
}Stack Overflow用户
发布于 2017-10-05 23:16:51
这是一个简单的例子：
<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="#">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29921696
复制相关文章
相似问题