HTML：分区响应图

参考：https://www.jianshu.com/p/f877cbe7cfd9

分区响应图

含义

当超链接按钮是图片时，将图片进行划分，使得点击图片不同区域时，会有不同的反馈。

比如，点击图片的不同区域，跳转至不同的页面。

使用

• <map> 、<area> 标签

  <img src="./1.png" usemap="#myMap" />
  <map name="myMap">
    <area href="http://baidu.com" shape="rect" coords="50,106,220,273" />
    <area href="http://google.com" shape="rect" coords="260,106,430,275" />
    <area href="http://juejin.im" shape="default" />
  </map>

获取坐标

当然啦，可以先利用 form 和 input 获取像素点坐标来获取区域坐标。

<form action="">
    <input type="image" src="./1.png" width="400">
</form>

可在浏览器中 url 地址栏末端看到 x, y 坐标。

<area> shape 选的是 rect(矩形) 时，获取图片区域左上角和右下角的坐标即可。

标签详解

• <img>

  • usemap： 和 <map> 中的 name 关联。
    
    

• <map>
  常与 <img> 绑定使用，用于定义图片指定区域的跳转内容。

  • name：为 map 规定名称。

    
    

• <area>
  嵌套在 <map> 内部，定义图像映射中的区域。

  • alt：规定区域的替代文本。

  • href：定义了相关区域所连目标。

  • target：定义了在何处打开目标链接。

    • _blank：在新窗口打开。
    • _self：（默认）使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
    • _parent：在父框架集中打开。
    • _top：在整个窗口中打开。

  • shape：定义了相关区域的形状。

    • default（ 默认值）：规定全部区域。
    • rect：矩形区域。
    • circle：圆形区域。
    • poly：多边形区域。

  • cooreds：定义相关区域的坐标。（和 shape 属性搭配使用）

    • 当 shape 属性为 rect 时，代表相关区域为 矩形，cooreds 属性值为 (x1,y1,x2,y2)，其中 x1、y1 为左上角的坐标，x2、y2 为右下角的坐标。
    • 当 shape 属性为 circle 时，代表相关区域为 圆形，cooreds 属性值为 (x,y,radius)，其中 x、y 为圆形的中心坐标，radius为圆形的半径。
    • 当 shape 属性为 poly 时，代表相关区域为 多边形，cooreds 属性值为 (x1,y1,x2,y2,x3,y3…xn,yn)，规定了多边形各个顶点的坐标，由于浏览器会自动闭合多边形，所以尾部坐标不必与第一个坐标相等。