最佳答案
<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)。 (再次以像素为单位)
关于javascript - 不规则形状图像映射 - 无 Canvas 、SVG 或 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19558794/