为了账号安全,请及时绑定邮箱和手机立即绑定

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

前言

不知道大家有没有遇到一张图片上面有很多个商品展示图,需要给每个商品添加一个链接,点击跳转到各自商品详情页。
这个需求在前端其实有一个专业的术语“图像地图”,大家先看看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,有了想法,开始我们的表演

简单实现

html部分

<body>
    <ul id="map-list"></ul>
    <img id="img" src="../images/timg.jpg" border="0" usemap="#planetmap" alt="Planets" />
    <div id="maparea"></div>
</body>

css部分

* {
  padding: 0;
  margin: 0;
}
.hot_div {
  border: 1px dashed blue;
  background: #5a72f8;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0.1;
  z-index: 9;
}
#map-list{
  position: absolute;
  top:0;
  z-index: 100;
  background: #fff;
  cursor: pointer;
}
#maparea{
  position: relative;
  z-index: 10;
}

js部分

var pointList = []; // 记录所有矩形坐标
window.onload = function() {
  document.onmousedown = function(e) {
    // 按下鼠标,我们得到起点位置
    var posx = e.clientX;
    var posy = e.clientY;

    // 我们创建一个hot_div来观察框选区域
    var div = document.createElement("div");
    div.className = "hot_div";
    div.id = "hot_div" + pointList.length;
    div.style.left = e.clientX + "px";
    div.style.top = e.clientY + "px";

    document.onmousemove = function(ev) {
      // 移动时监听鼠标位置,向hot_div添加left,top,width,height
      div.style.left = Math.min(ev.clientX, posx) + "px";
      div.style.top = Math.min(ev.clientY, posy) + "px";
      // Math.abs是取绝对值
      div.style.width = Math.abs(posx - ev.clientX) + "px";
      div.style.height = Math.abs(posy - ev.clientY) + "px";

      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
})

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

记录矩形坐标

document.onmouseup = function() {
  // 选择区域后移除div(不删除点击不了,点击都在这个div上面)
  div.parentNode.removeChild(div);
  // left,top构成左上角坐标点,left+width,top+height构成右下角坐标点
  var point = {
      x1: parseInt(div.style.left),
      y1: parseInt(div.style.top),
      x2: parseInt(div.style.left) + parseInt(div.style.width),
      y2: parseInt(div.style.top) + parseInt(div.style.height),
      host: 'http://www.baidu.com'
  }
  // 都记录存起来
  pointList.push(point);
  
  // 创建map
  createMap();
  
  document.onmousemove = null;
  document.onmouseup = null;
}

生成map

function createMap(){
    var li = '';
    var areaTpl = '';
    // 遍历生成模板
    pointList.forEach((item, index)=> {
        // li主要是生成一个list,用来管理map的
        // 可以操作修改链接和删除
        li += '<li class="pointli" data-index="'+index+'"> '+
        '我是第'+index+'个热区('+(item.host)+'), 点击修改链接 '+
        '<span class="delPoint" data-index="'+index+'">删除</span></li>';

        // map area模板
        areaTpl += '<area '+
        'shape="rectangle" '+
        'coords="'+item.x1+','+item.y1+','+item.x2+','+item.y2+'" '+
        'href ="'+(item.host)+'" '+
        'target ="_blank" '+
        'alt="web秀" />';
    })
    // 模板添加到网页中(map和area要同时添加)
    $('#map-list').html(li);
    $('#maparea').html('<map name="planetmap" id="planetmap">'+areaTpl+'</map>');
}

删除矩形坐标

// 简单“删除”点击事件
$(document).on('click', '.delPoint', function(e){
  // status状态主要是用来阻止鼠标按下事件的 
  status = true;
  document.onmousemove = null;
  document.onmouseup = null;
  // 获取下标
  var index = $(this).data('index');
  // 删除数组某个对象
  pointList.splice(index, 1);
  // 重新生成map
  createMap();
  // 1s后状态重置
  setTimeout(function(){
      status = false;
  }, 1000)
  return false;
})

所以需要在onmousedown添加一行代码

document.onmousedown = function(e) {
  // 阻止事件
  if (status) {
      return;
  }
  ...
  ...
}

修改热点链接

$(document).on('click', '.pointli', function(e){
  status = true;
  document.onmousemove = null;
  document.onmouseup = null;
  var index = $(this).data('index');
  let point = pointList[index];
  // 弹框提示输入新的链接
  var host = prompt("请输入新的链接", point.host);
  if (host) {
    // 更新数组
    point.host = host;
    pointList.splice(index, 1, point);
    // 重新渲染
    createMap();
  }
  setTimeout(function(){
      status = false;
  }, 1000)
})

最终演示效果
JavaScript动态图片热区(绘制多个矩形并分别跳转)

注意看地址栏地址变化

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.5万
获赞与收藏
5278

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消