<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。