关于javascript:图片热区-Picture-hot-zone

27次阅读

共计 1053 个字符，预计需要花费 3 分钟才能阅读完成。

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

图片热区 github 地址

刚开始想的是，通过后盾配置的图片定位坐标 x，y 轴进行画盒子加一个点击事件。搜了下热区，而后察觉 html 自带有热区的标签的 map 和 area。这个计划几乎 o 了

<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

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

具体能够拷贝我的项目下来看看

图片热区 github 地址

正文完