JavaScript

JavaScript动态图片热区(绘制多个矩形并分别跳转链接)

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

不知道大家有没有遇到一张图片上面有很多个商品展示图,需要给每个商品添加一个链接,点击跳转到各自商品详情页。
这个需求在前端其实有一个专业的术语“图像地图”,大家先看看w3c简单示例

JavaScript动态图片热区(绘制多个矩形并分别跳转)

<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>

上图,点击各个星球,会做不同跳转。

基础知识

代码主要是img标签上的usemap属性,关联下方的map标签。map有多个areaarea就是点击的区域,coords是坐标(如矩形x1,y1,x2,y2),shape是区域类型:

1、圆形(circ 或 circle)
shape="circle",coords="x,y,z"
这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。

2、多边形(poly 或 polygon)
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

3、矩形(rect 或 rectangle)
shape="rectangle",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

进阶

想法

下面我们回到正题:“一张图片上面有很多个商品展示图,需要给每个商品添加一个链接,点击跳转到各自商品详情页”,这个需求上面。

想法:
1、监听鼠标事件,点击记录起点位置,也就是coords左上角的坐标
2、鼠标移动至松开鼠标,记住最后位置,也就是coords右下角的坐标
3、这样2个点就是构成一个矩形,然后坐标生成img标签的map,实现点击链接

ok,有了想法,开始我们的表演

更多精彩内容,可以点击“立即支付”,查看隐藏内容哦!

内容查看价格1立即支付    升级VIP后免费升级VIP
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!

(504)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注