HTML5中的map标签——＜map＞

HTML5 标签用来表示图像映射，也就是指带有可点击区域的图像映射

说白了呢，就是可以划定一个区域，鼠标点击这个区域即可实现跳转（类似于超链接 a标签 ）

---

那么首先介绍一下相关的标签：

标签	描述
<img>	定义图像的标签
<map>	定义带有可点击区域的图像映射标签
<area>	定义图像中单个的可点击的区域
<figure>	定义媒介内容的分组，以及他们的标题
<figcaption>	定义figure元素的标题

其中标红部分为重要部分

---

img标签 是一个单标签，需要使用src属性来引用我们的图片

<map>标签说白了就是用来包裹<area>标签

<area>标签主要是定义划分可点击区域的形状，以及定义超链接

---

使用方法：

<img src="./image/html.png" usemap="#html">
   
<map name="html">
   <area shape="rect" coords="0,30,200,60" href="./1.html">
   <area shape="rect" coords="0,60,150,90" href="./2.html">
   <area shape="rect" coords="0,90,150,120" href="./3.html">
   <area shape="rect" coords="0,120,150,150" href="./4.html">
   <area shape="rect" coords="0,150,150,150" href="./5.html">
</map>

注释：
<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与图像映射之间的联系
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性

<area> 标签定义图像映射中的可点击区域（注：图像映射指得是带有可点击区域的图像）。
area是嵌套在 <map> 标签中的

 关联：

在<img>标签内，我们需要添加一个usemap的属性，属性值可自定义

<map>标签内需要写上name属性，且属性值需与<img>标签内的usemap属性的值一致

定义区域：

区域形状	属性值
全区域	default
圆形	circle
多边形	poly
矩形	rect

 

<area>标签的shape属性为形状属性，这里以rect(矩形)为例

<area>标签的coords属性用来划分区域的 x、y 坐标。coords属性与 shape 属性配合使用来规定区域的尺寸、形状和位置。形状为矩形时，取值为(起点x , 起点y , 终点x , 终点y)，也可以理解为左上角 x , y 和右下角 x , y 值

区域为圆形circular时，coords的取值为x , y , r  （圆心、半径）

最后就是<area>标签的href属性，可使用内部网页，也可以输入完整http网址链接

---

这样我们就可以实现，不用a标签，在图片上点击不同的位置跳转到不同的页面了