javascript - 不规则形状图像映射 - 无 Canvas 、SVG 或 Javascript

Question

如何在网页中制作带有背景图片的图片映射链接区域，如下图？是使用 Canvas 的唯一方法吗？有什么方法可以使用纯 css 和跨浏览器来实现吗？

Answer 1

<area shape>具有定义的属性 coords会做的工作。一开始它可能看起来很复杂，但是一旦你理解了形状结构就很容易了。这是一个 JSFiddle 示例:>>>CLICK HERE<<<

代码如下:

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 坐标定义圆心，半径为距离 (以像素为单位)从圆的中心到最外层
• Rectangle - 一个矩形包含四个坐标(x1、y1、x2、y2)，x1/y1 坐标定义矩形的左/上 Angular ，x2/y2 坐标定义矩形的右/下 Angular (以像素为单位)
• 多边形 (您的两个形状都需要使用多边形构造) - 多边形包含无限数量的坐标，这些坐标定义你形状的每个 Angular 落。三 Angular 形中共有三个 Angular (或顶点)，需要六个坐标(x1、y1、x2、y2、x3、y3)。 (再次以像素为单位)