前序：目前做的电商我的项目是通过管理系统生成了页面配置的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地址