H5图像映射——area标签

旧城等待， 2022-11-02 13:14 167阅读 0赞

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

#### 一、定义 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgyOTcxOQ_size_16_color_FFFFFF_t_70_pic_center]

图像映射

#### 二、属性 ####

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgyOTcxOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/3c216e4e581846e499390fc1653c8798.png