您现在的位置是：首页 > 前端 > html网站首页html

今天无意中发现了一组特别有意思的HTML标签：map标签和area标签，查资料后总结一下：

文档：

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

<area>：定义<map>的可点击区域

当<map>设置name或者id属性时，<img>标签的usemap属性会根据<map>的id和name属性来关联<map>

<map>标签：

必需的属性：

id：unique_name 为 map 标签定义唯一的名称。

可选的属性：

name：mapname 为 image-map 规定的名称，name 属性与 <img> 标签的 usemap 属性相关联，创建图像与映射之间的联系。

<area>标签：

必需的属性：

alt：定义此区域的替换文本（它规定在图像无法显示时的替代文本）。

可选的属性：

coords：

标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

圆形：shape="circle"，coords="x,y,z"

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

shape：

default表示将定义整个区域为热点

rect表示将定义一个矩形区域为热点，(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

circle表示将定义一个圆形区域为热点，(圆心坐标为(X1,y1)，半径为r)

poly表示将定义一个多边形区域为热点，(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)

target：

_blank在新窗口中打开被链接文档。

_self默认。在相同的框架中打开被链接文档。

_parent在父框架集中打开被链接文档。

_top在整个窗口中打开被链接文档。

framename在指定的框架中打开被链接文档。

href：

URL定义此区域的目标 URL。

map标签和area标签的用途：与img标签绑定使用，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。

举个例子：

<img src="map.png" alt="map" usemap="#planetmap" class="img">
<map name="planetmap" id="planetmap">
	<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" target=""_blank" />
	<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
	<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

例如，在中国地图上把每个省份都绘制热点区域，点击不同的省份即可跳转到不同的页面。

这里有个难点就是area标签的coords属性的值不好获取，我们可以借助PS工具或DW可视化来绘制热点区域，可大大增加开发效率！