不规则形状的图像映射 - 没有画布，SVG或Javascript

Question

如何在网页中制作带背景图像的图像地图链接区域，如下所示？是使用画布的唯一方法吗？用纯CSS和跨浏览器的任何方式吗？

Answer 1

定义<area shape>的{​​{1}}属性可以完成这项工作。一开始看起来可能很复杂，但是一旦你理解了形状结构就很容易了。这是一个JSFiddle示例：>>>CLICK HERE<<<

以下是代码：

HTML：

coords

CSS：

<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>

坐标往往会让人感到困惑，所以我已经包含了一个图表供您与代码匹配。您可以使用总共三种形状来确定坐标：

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