HTML--用img制作图像地图

原文链接：http://www.cnblogs.com/SkySoot/archive/2012/05/13/2498197.html

HTML 图像地图

什么是图像地图?

       把一幅图像分成多个区域，每个区域指向不同的URL地址。例如，将一幅中国地图的图像按照省市划分为若干个区域，这些区域就被称为热点，单击热点区域，就可以连接到与相应的省市有关的页面，这就是图像地图。
 

怎么制作?

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

示例代码

CODE:

<img src="china.gif" usemap="#mymap">

map name="mymap">

<area shape="rect" href="a.html" coords="0,0,50,50">

<area shape="circle" href="b.html" coords="120,80,50">

<area shape="poly" href="c.html" coords="0,0,50,50,100,100,200,200">

/map>

Shape属性的设置说明：
Rect：
       定义一个矩形区域，coords属性设置值为左上角、右下角的坐标，各个坐标之间用逗号分开。
Poly：
       定义一个多边型区域，coords属性设置值为多边形各个顶点的坐标值。
Circle：
       定义一个圆形区域，coords属性设置值为圆心坐标及半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。

注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的
area 标签。浏览器会忽略超过图像边界范围之外的坐标。