H5图像映射——area标签

<area> 标签定义是图像映射中的区域，即带有可点击区域的图像。

一、定义

1、<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系（注：由于浏览器兼容不同，usemap 属性也可关联 id 属性，所以我们需要同时向 <map> 添加 id 和 name两个属性）。
2、area 元素嵌套在 <map>标签中。
举例：将长宽都为300px的灰色图片中两个色块儿做成映射区域。

<img src="./map.png" usemap="#imgMap" class="img" />
<map name="imgMap" id="imgMap">
	<area shape="rect" coords="10,10,110,110" href="https://www.baidu.com" alt="百度" />
	<area shape="circ" coords="190,200,50" href="https://www.w3school.com.cn" alt="w3school" />
</map>

图像映射

二、属性

属性名	属性值	含义	是否必要
alt	text	定义此区域的替换文本	是
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标	否
href	URL	定义此区域的目标 URL	否
nohref	nohref	从图像映射排除某个区域，即规定该区域没有相关的链接。	否
shape	default、rect、circ、poly	定义区域的形状	否
target	_blank、_parent、_self、_top	规定在何处打开 href 属性指定的目标 URL	否

1、shape 详解

shape 属性用于定义图像映射中对鼠标敏感的区域的形状：

• 整个区域（default），默认值
• 圆形（circ 或 circle）
• 多边形（poly 或 polygon）
• 矩形（rect 或 rectangle）

由于不同浏览器的兼容性不用，shape 属性值建议使用缩写。

2、coords 详解

coords属性和shape属性搭配使用，后者表示区域的形状，前者则是这个区域的坐标。
图像左上角的坐标是 “0,0”。
（1）shape取值为 default 时(或者不写)：整个区域，但实际应用中发现默认矩形并需要写坐标，coords取值为左上角和右下角的坐标， (x1,y1,x2,y2)；
（2）shape取值为 rect 时：coords取值为左上角和右下角的坐标， (x1,y1,x2,y2)；
（3）shape取值为 circ 时：coords取值为圆心坐标和半径， (x,y,r)；
（4）shape取值为 poly 时：coords取值为顶点的坐标， (x1,y1,x2,y2,…,xn,yn)，多边形会自动封闭，所以在列表的结尾不需要重复第一个坐标来闭合整个区域。

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

3、target详解

• _blank，在新窗口中打开被链接文档
• _self，默认值。在相同的框架中打开被链接文档，
• _parent，在父框架集中打开被链接文档。
• _top，在整个窗口中打开被链接文档。
  例如：
  比如网页A中镶嵌iframe了网页B，网页B又镶嵌iframe了网页C：
  如果网页C中链接网址D设置target=_parent，则跳将网页B去掉直接网页A中嵌入网页D;
  而如果网页C中target=_top ，则直接跳出所有iframe框架，直接转向D。