我可以在imagemap区域元素上有一个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>

我尝试了2种不同的方法来进行onclick事件.首先我试过这个:

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

我也试过这个:

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

以上工作都没有.区域元素是否支持上述,或者它们仅支持具有href？

提前致谢!

Answer 1

请注意:

1. 属性href是强制性的,没有它,区域标签什么都不做!

2. 要添加单击事件,您需要阻止默认href.

您的代码应如下所示:

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

这里有实例.

Answer 2

它的形状是问题所在。您的代码已将形状设置为等于多边形，但坐标属性中只有 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>