当前位置: 首页 > Web前端 > JavaScript

图片热区图片热区

时间:2023-03-26 21:23:17 JavaScript

前言:目前的电商项目是通过管理系统生成页面配置的json数据,生成活动页面。有一个图片热区组件,可以通过为图片画一个区域来点击。区域跳转到不同的链接。图片热区github地址HTML图片热区地图区的使用1.如何实现热区一开始我想到的是定位后台配置的图片的坐标x轴和y轴画一个方框,添加一个点击事件。搜索hotzone后发现html里面有一张map和area,上面有hotzone的标签。这个解决方法很简单o2.简单介绍一下主要浏览器支持标签。定义和用法:标签定义了图像映射中的一个区域(注:图像映射是指具有可点击区域的图像)。area元素总是嵌套在标签中。ps:标签中的usemap属性与map元素的name属性相关联,建立图片和地图之间的链接。中的usemap属性可以引用中的id或name属性(由浏览器决定),所以我们需要在中同时添加id和name属性。shape和coords:是用来设置热点形状和大小的两个主要参数。coords属性指定区域的x和y坐标。coords属性与shape属性结合使用来指定区域的大小、形状和位置。图像左上角的坐标为“0,0”。参考w3school:https://www.w3school.com.cn/tags/att_area_coords.asp3。背景图片热区组件设置决定了绘制点击区域坐标点时生成的图片的宽度。前端获取到坐标点后,需要使用返回数据的比例(默认宽度/当前元素可见宽度为坐标值),然后是该坐标的x,y,nx,ny值比例上面的坐标需要这是我们前端显示的真实坐标。可能会涉及到一些边界控制,还有鼠标滑动动画区域等,具体可以复制项目看看图片热点区域的github地址