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

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

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

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

function adjustPosition(position) {
// 获取宽高
var pageWidth = document.body.clientWidth;
var pageHeight = document.body.clientHeight;
// 图片原始尺寸
var imageWidth = 1423;
var imageHeigth = 1077; var each = position.split(","); for (var i = 0; i < each.length; i++) {
if(i%2==0){
// 新的y轴坐标
each[i] = Math.round(parseInt(each[i]) * pageHeight / imageHeigth).toString();
}else{
// 新的x轴坐标
each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();
}
}
var newPosition = "";
for (var j = 0; j < each.length; j++) {
newPosition += each[j];
if (j < each.length - 1) {
newPosition += ",";
}
}
return newPosition;
}

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

function adjust() {
var map = document.getElementById("CribMap");
var area=map.getElementsByTagName('area'); for (var i = 0; i < area.length; i++) {
var oldCoords = area[i].getAttribute("coords");
var newcoords = adjustPosition(oldCoords);
area[i].setAttribute("coords", newcoords);
}
}

运行: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. SpringCloud微服务(01):Eureka组件,管理服务注册与发现

    本文源码:GitHub·点这里 || GitEE·点这里 一.Eureka基本架构 1.Eureka简介 Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,SpringCl ...

  2. PAT 1008 Elevator 数学

    The highest building in our city has only one elevator. A request list is made up with N positive nu ...

  3. Java中Atomic类的使用分析

    1:为什么会出现Atomic类 在多线程或者并发环境中,我们常常会遇到这种情况 int i=0; i++ 稍有经验的同学都知道这种写法是线程不安全的.为了达到线程安全的目的,我们通常会用synchro ...

  4. Oracle 事务ACID的特性

    1.事务对数据库控制操作 事务(Transaction)是用户定义的一个数据库操作序列,是不可分割的一部分的整体.这些操作要么做,要么不做(原子性).事务是对数据库对进行操作的最基本的逻辑单位,他可以 ...

  5. 随机的标识符GUID

    Guid guid = Guid.NewGuid();Console.WriteLine(guid.ToString());

  6. H5 App实现热更新,不需要重新安装app

    直接上代码吧,你竟然搜到了我的文章就应该知道了,为什么要热更新 //app热更新下载 //假定字符串的每节数都在5位以下 function toNum(a) { //也可以这样写 var c=a.sp ...

  7. scrapy常用配置

    一.基本配置 1.项目名称 2.爬虫应用路径 SPIDER_MODULES = ['Amazon.spiders'] NEWSPIDER_MODULE = 'Amazon.spiders' 3.客户端 ...

  8. JMeter内存溢出:java.lang.OutOfMemoryError: Java heap space解决方法

    一.问题原因 用JMeter压测,有时候当模拟并发请求较大或者脚本运行时间较长时,JMeter会停止,报OOM(内存溢出)错误. 原因是JMeter是一个纯Java开发的工具,内存由java虚拟机JV ...

  9. js的try catch使用心得

      1 try catch的使用,永远应该放在你的控制范围之内,而不应该防范未知的错误.也就是说你很清楚知道这里是有可能”出错“的,而且你很清楚知道什么前提下会出错,你就是要故意利用报错信息来区分错误 ...

  10. OpenCV:获取图像当中某一点的坐标

    import numpy as np image=np.zeros((300,300,3),dtype='uint8') (cx,cy)=image.shape[1]//2,image.shape[0 ...