html中的map标签和area标签详解
今天无意中发现了一组特别有意思的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标签绑定使用，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。
举个例子：
例如，在中国地图上把每个省份都绘制热点区域，点击不同的省份即可跳转到不同的页面。
PS工具或DW可视化来绘制热点区域，可大大增加开发效率！
- 发表于 2021-05-14 18:50
- 阅读 ( 1543 )
- 分类：WEB前端开发
