Image Map一种具有可点击区域的图像

用法

1. <map> 标签用于定义图像地图。图像地图（image map，一种分区导航图）是一种具有可点击区域的图像。
2. <map> 元素需要一个 name 属性，该属性与<img>元素的 usemap 属性相关联，创建图像和地图之间的关系。
3. <map> 元素包含一些 元素， 定义图像地图中的可点击区域。

示例

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">

<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

说明：

1. shape 是设置形状 rect 是矩形，circle 是圆形
2. coords 是设置坐标
   • rect 矩形：坐标从左到右，依次是矩形左侧边距离图片左边的距离，上侧边距离图片顶部的距离，右侧边距离图片左边的距离，底部边距离图片顶部的距离
   • circle：坐标从左到右，依次是中心点距离图片左边的距离，中心点距离图片顶部的距离，圆形的半径

后话

此文章只是用于自己加强记忆，具体请参考官方文档