我想在一个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?
发布于 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>
发布于 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
}
发布于 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="#">
https://stackoverflow.com/questions/29921696
复制相似问题