1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE>
<html>
  <head>
    <title> 图片热点的设置 </title>
    <meta http-equiv="content-type"   content="text/html;charset=utf-8"/>
  </head>
  <body>
  <!--
    img标签的usemap属性，将图像定义为客户端图像映射。
    引用<map>中的id或name属性(由浏览器决定)，创建图像与映射之间的联系,所以我们需要同时向<map>添加id和name两个属性。
  -->
    <img src="image/picture.png" usemap="#planemap" alt="示例图片" />
    <map name="planemap" id="planemap">
      <area shape="rectangle" coords="454,249,723,276" href ="http://www.littleee.com"/>
    </map>
  </body>
</html>

map标签和area标签相关属性：

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

属性 值 说明
shape default，rectangle(rect)，circle(circ)，polygon(poly) 定义区域的形状，整块区域，矩形，圆形，多边形
coords 定义可点击区域（对鼠标敏感的区域）的坐标。
圆形 shape=”circle”，coords=”x,y,z” 这里的 x 和 y 定义了圆心的位置（”0,0” 是图像左上角的坐标），z 是以像素为单位的圆形半径。
多边形 shape=”polygon”，coords=”x1,y1,x2,y2,x3,y3,…” 每一对 “x,y” 坐标都定义了多边形的一个顶点（”0,0” 是图像左上角的坐标）
矩形 shape=”rectangle”，coords=”x1,y1,x2,y2” 第一个坐标是矩形的一个角(左上角)的顶点坐标，另一个坐标是对角(右下角)的坐标
href 定义此区域的目标 URL
nohref 定义该区域没有相关链接
arget _blank ,_parent ,_self ,_top 规定在何处打开 href 属性指定的目标 URL。

注意
定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。