不规则形状的图片地图-不包含画布，SVG或Javascript

Question

怎样像下面这样使网页中的背景图与图像地图链接区域？ 是使用画布的唯一方法吗？ 用纯CSS和跨浏览器做到这一点的任何方法？

Answer 1

具有定义coords的<area shape>属性将完成此工作。 乍一看可能很复杂，但是一旦您了解了形状构造，就很容易了。 这是一个示例JSFiddle： >>>点击这里<<<

这是代码：

HTML：

<div class="imagemap">
    <img src="http://i.imgur.com/T7OrXYW.png" alt="The Map" usemap="#mymap" />
    <map name="mymap" id="mymap">
        <area shape="poly" coords="6, 10, 280, 10, 144,157" href="http://www.aol.com" />
        <area shape="poly" coords="7, 20, 144, 167, 144, 288, 6, 288" href="http://www.yahoo.com" />
    </map>
</div>

CSS：

.imagemap img {
    width: 300px;
    height: 300px;
    border: 1px solid blue;
}

坐标往往会使人们感到困惑，因此我提供了一个图表供您与代码匹配。 您可以使用总共三种形状来确定坐标：

• 圆 -圆包含三个坐标（x，y，半径），x和y坐标定义圆的中心，半径是从圆心到圆的最外部分的距离（以像素为单位）
• 矩形-矩形包含四个坐标（x1，y1，x2，y2），x1 / y1坐标定义矩形的左/上角，x2 / y2坐标定义矩形的右/下角（以像素为单位）
• 多边形 （两个形状都需要使用多边形形状构造） -多边形包含无限数量的坐标，这些坐标定义了形状中的每个角。 在一个三角形中，总共有三个角（或顶点） ，需要六个坐标（x1，y1，x2，y2，x3，y3）。 （再次以像素为单位）