图片热区 Picture hot zone

前序：目前做的电商项目是通过管理系统生成了页面配置的json数据生成活动页，
其中有一个图片热区组件，通过给图片画区域，进行点击不同区域跳转不同链接。

图片热区github地址

HTML图片热区map area的用法

1.如何实现热区

刚开始想的是，通过后台配置的图片定位坐标x，y轴进行画盒子加一个点击事件。搜了下热区，然后发觉html自带有热区的标签的map和area。这个方案简直o了

2.简单介绍下使用

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

主流浏览器都支持 <area> 标签。
定义和用法：
<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 <map> 标签中。

ps：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。

shape和coords：是两个主要的参数，用于设定热点的形状和大小
coords 属性规定区域的 x 和 y 坐标。
coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。
图像左上角的坐标是 "0,0"。

参考w3school：https://www.w3school.com.cn/tags/att_area_coords.asp

3.后台图片热区组件设置

绘制时候确定图片的宽度生成的点击区域坐标点，前端在拿到坐标点后，需要用返回数据的ratio(默认宽/当前元素的可视宽度以坐标值)，那么上面的coords的x，y，nx，ny值ratio就是需要这个才是我们前端展示的真正的坐标。里面可能涉及一些边界控制，以及鼠标滑动画区域等等


详细可以拷贝项目下来看看

图片热区github地址