创建一个自由选择的图像映射

Question

我想知道是否有办法让我自由选择创建图像地图。到目前为止我只发现了矩形，多边形和圆形裁剪。我想知道是否可以在选定的区域内进行选择。

Answer 1

是的，它被称为poly，它的工作原理基本相同，您只需定义一个坐标列表即可。 例如：

＆＃13;

＆＃13;

img { position: absolute; left: 0; top: 0; width: 100px; height: 100px; }
div { position: absolute; }
#div1 { left: 17px; top: 51px; width: 49px; height: 38px; background-color: #ccc; }
#div2 { left: 17px; top: 26px; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid #ccc; }

＆＃13;

<map name="map">
  <area href="/" shape="poly" coords="17,51,42,26,66,51,66,89,17,89" />
</map>

<div id="div1"></div>
<div id="div2"></div>
<img src="#" usemap="#map" />

＆＃13;

＆＃13;

＆＃13;

不均匀的是X坐标，偶数是Y坐标。