HTML图片热区map area的用法

map标签

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

• area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
• img标签中的usemap属性可引用的map标签中的id或name属性（取决于浏览器），所以我们应同时向map标签添加id和name属性。

注释：  标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。 

 示例

我们想在下面一张图实现九个热点区域，不切图，就使用map标签。

 用ps工具得到以下坐标

步骤: 

1. 首先必须定义出图像上的各个热点区域的形状，位置坐标，及其指向的URL地址等信息，这个过程叫图像热点映射。图像热点映射需要使用标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。
2. 图像热点映射中的各个区域用标签说明，标签的格式为：，href部分也可以用nohref替换，表示在该区域单击鼠标无效。标签还可以有一个target属性，用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。
3. 定义好了图像热点之后，接着就要在 图像标签中增加一个名为usemap的属性设置，usemap属性指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为：在

 代码实现:

Shape属性的设置说明：

Rect：

       定义一个矩形区域，coords属性设置值为左上角、右下角的坐标，各个坐标之间用逗号分开。

Poly：

       定义一个多边型区域，coords属性设置值为多边形各个顶点的坐标值。

Circle：

       定义一个圆形区域，coords属性设置值为圆心坐标及半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。