业务需求:点击图片热区跳转到不同的链接地址,同时要自适应窗口尺寸的变化。

问题:热区坐标点不会随着窗口调整变化

解决思路:获取初始的坐标点与图片宽高的比例,然后用比例乘以调整后的窗口宽高,就获得了新的坐标点

根据初始坐标计算新坐标:

  1. function adjustPosition(position) {
  2. // 获取宽高
  3. var pageWidth = document.body.clientWidth;
  4. var pageHeight = document.body.clientHeight;
  5. // 图片原始尺寸
  6. var imageWidth = 1423;
  7. var imageHeigth = 1077;
  8.  
  9. var each = position.split(",");
  10.  
  11. for (var i = 0; i < each.length; i++) {
  12. if(i%2==0){
  13. // 新的y轴坐标
  14. each[i] = Math.round(parseInt(each[i]) * pageHeight / imageHeigth).toString();
  15. }else{
  16. // 新的x轴坐标
  17. each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();
  18. }
  19. }
  20. var newPosition = "";
  21. for (var j = 0; j < each.length; j++) {
  22. newPosition += each[j];
  23. if (j < each.length - 1) {
  24. newPosition += ",";
  25. }
  26. }
  27. return newPosition;
  28. }

获取coords属性的坐标值,并用新计算出来的坐标点进行替换:

  1. function adjust() {
  2. var map = document.getElementById("CribMap");
  3. var area=map.getElementsByTagName('area');
  4.  
  5. for (var i = 0; i < area.length; i++) {
  6. var oldCoords = area[i].getAttribute("coords");
  7. var newcoords = adjustPosition(oldCoords);
  8. area[i].setAttribute("coords", newcoords);
  9. }
  10. }

运行:adjust();

原文:https://blog.csdn.net/sinat_37881704/article/details/80914194

map元素area热区坐标自适应窗口大小的更多相关文章

  1. html中map area 热区自适应的原生js实现方案

    在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...

  2. js动态改变图片热区坐标,手机端图片热区自适应

    <img id='banner1' src="images/banner.jpg" usemap="#banner" border="0&quo ...

  3. 图像映射<map>、<area>

    1.<map>定义图像映射,图像映射(image-map)指带有可单击区域的一幅图像. 2.<area>定义图像映射中的区域,area元素永远嵌套在map元素内部,area元素 ...

  4. map,area标签

    map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...

  5. 解决:Map的area属性标签鼠标Hover可以给area加背景

    css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...

  6. 获取html上元素的真正坐标

    使用HTML元素的style.left,style.top,style.width,style.height以及width,height属性,都不能获得元素的真正位置与大小,这些属性取出来的都是原来的 ...

  7. echarts学习总结(二):一个页面存在多个echarts图形,图形自适应窗口大小

    如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为: myChart.setOption(option); window.onresize = myChart.resize; 则只 ...

  8. css移除a标签及map、area(图片热区映射)点击过后的边框

    默认a标签及其包含的html元素和map中的area(图片热区映射)在点击过后留有默认的蓝色边框,如下图 可以看到,蓝色的边框破坏了页面的整体美感,很多时候我们都是不需要的.通过设置相应的css可以去 ...

  9. html5在手机端关于 map area中的自适应

    https://github.com/stowball/jQuery-rwdImageMaps用这一个插件可自适应!!!

随机推荐

  1. Python 关于 pip 部分相关库的安装

    下文中“:”后面安装的安装语句需要打开 cmd (命令提示符),在 cmd 中输入. 示例: 在搜索框输入 cmd,单机命令提示符: 然后输入安装语句,按回车键: 因为我之前已经装过了,所以这里显示的 ...

  2. fluwx使用的问题

    今天搞了下fluwx这个库,也是遇到了很多问题. 问题一:‘包名不对,请检查包名是否与开放平台上填写的一致’ 显示把文档这些看了遍,但是也不是很清楚,还加了下群问别人,主要我没有开发过Android, ...

  3. JS(TS)中数组常见的方法(未完待续)

    push():向数组末尾添加一个或多个元素 unshift(): 向数组的开头添加一个或多个元素 pop(): 删除数组最后一个元素 shift(): 删除数组第一个元素 sort(): 给数组排序  ...

  4. Cesium专栏-裁剪效果(基于3dtiles模型,附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  5. NTP and Chrony在RHEL

    在RHEL7上,Chrony已经代替了NTP来做时间同步服务. 1 服务器上操作 yum -y install chrony vim /etc/chrony.conf # Allow NTP clie ...

  6. gdisk分区及swap分区

    gdisk分区及swap分区 gdisk分区,分区表是GPT,支持更大的分区,128G gdisk分区 一,添加硬盘 二,分区 1,安装gdisk [root@oldboy ~]# yum insta ...

  7. python字典中列表追加数据

    dict = {} for i in range(1, 6): if i not in dict: dict[i] = [] for j in range(101, 106): dict[i].app ...

  8. mssql 系统函数 字符串函数 space 功能简介

    转自: http://www.maomao365.com/?p=4672  一.space 函数功能简介 space功能:返回指定数量的空格参数简介: 参数1: 指定数量,参数需为int类型 注意事项 ...

  9. 002 C/C++ 数组的传递

    传递一个数组给一个函数的正确做法: 1.传递数组的内存首地址. 2.传递数组的有效长度.指数组的元素数量. 编译器总是将数组类型的变量作为指针传递. 计算数组的长度: int length = siz ...

  10. 二、ITK例子-jpg图像读写

    一.ITK的读写工作原理 在ITK里面,我们需要设置读取图像的像素类型,图像类型. 然后设置读取指针,将读取参数传入. 同时设置写指针,也将写入文件参数传入. 为了实现读写动作,我们需要构造一个IO工 ...