javascript - 不规则形状图像映射 - 不带画布、SVG 或 Javascript

Question

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

Answer 1

定义的<area shape>属性coords将完成这项工作。一开始它可能看起来很复杂，但是一旦你了解了形状构造，它就很容易了。这是一个示例 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）。 （再次以像素为单位）