map元素area热区坐标自适应窗口大小
业务需求:点击图片热区跳转到不同的链接地址,同时要自适应窗口尺寸的变化。
问题:热区坐标点不会随着窗口调整变化
解决思路:获取初始的坐标点与图片宽高的比例,然后用比例乘以调整后的窗口宽高,就获得了新的坐标点
根据初始坐标计算新坐标:
- 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热区坐标自适应窗口大小的更多相关文章
- html中map area 热区自适应的原生js实现方案
在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...
- js动态改变图片热区坐标,手机端图片热区自适应
<img id='banner1' src="images/banner.jpg" usemap="#banner" border="0&quo ...
- 图像映射<map>、<area>
1.<map>定义图像映射,图像映射(image-map)指带有可单击区域的一幅图像. 2.<area>定义图像映射中的区域,area元素永远嵌套在map元素内部,area元素 ...
- map,area标签
map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...
- 解决:Map的area属性标签鼠标Hover可以给area加背景
css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...
- 获取html上元素的真正坐标
使用HTML元素的style.left,style.top,style.width,style.height以及width,height属性,都不能获得元素的真正位置与大小,这些属性取出来的都是原来的 ...
- echarts学习总结(二):一个页面存在多个echarts图形,图形自适应窗口大小
如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为: myChart.setOption(option); window.onresize = myChart.resize; 则只 ...
- css移除a标签及map、area(图片热区映射)点击过后的边框
默认a标签及其包含的html元素和map中的area(图片热区映射)在点击过后留有默认的蓝色边框,如下图 可以看到,蓝色的边框破坏了页面的整体美感,很多时候我们都是不需要的.通过设置相应的css可以去 ...
- html5在手机端关于 map area中的自适应
https://github.com/stowball/jQuery-rwdImageMaps用这一个插件可自适应!!!
随机推荐
- Python 关于 pip 部分相关库的安装
下文中“:”后面安装的安装语句需要打开 cmd (命令提示符),在 cmd 中输入. 示例: 在搜索框输入 cmd,单机命令提示符: 然后输入安装语句,按回车键: 因为我之前已经装过了,所以这里显示的 ...
- fluwx使用的问题
今天搞了下fluwx这个库,也是遇到了很多问题. 问题一:‘包名不对,请检查包名是否与开放平台上填写的一致’ 显示把文档这些看了遍,但是也不是很清楚,还加了下群问别人,主要我没有开发过Android, ...
- JS(TS)中数组常见的方法(未完待续)
push():向数组末尾添加一个或多个元素 unshift(): 向数组的开头添加一个或多个元素 pop(): 删除数组最后一个元素 shift(): 删除数组第一个元素 sort(): 给数组排序 ...
- Cesium专栏-裁剪效果(基于3dtiles模型,附源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- NTP and Chrony在RHEL
在RHEL7上,Chrony已经代替了NTP来做时间同步服务. 1 服务器上操作 yum -y install chrony vim /etc/chrony.conf # Allow NTP clie ...
- gdisk分区及swap分区
gdisk分区及swap分区 gdisk分区,分区表是GPT,支持更大的分区,128G gdisk分区 一,添加硬盘 二,分区 1,安装gdisk [root@oldboy ~]# yum insta ...
- python字典中列表追加数据
dict = {} for i in range(1, 6): if i not in dict: dict[i] = [] for j in range(101, 106): dict[i].app ...
- mssql 系统函数 字符串函数 space 功能简介
转自: http://www.maomao365.com/?p=4672 一.space 函数功能简介 space功能:返回指定数量的空格参数简介: 参数1: 指定数量,参数需为int类型 注意事项 ...
- 002 C/C++ 数组的传递
传递一个数组给一个函数的正确做法: 1.传递数组的内存首地址. 2.传递数组的有效长度.指数组的元素数量. 编译器总是将数组类型的变量作为指针传递. 计算数组的长度: int length = siz ...
- 二、ITK例子-jpg图像读写
一.ITK的读写工作原理 在ITK里面,我们需要设置读取图像的像素类型,图像类型. 然后设置读取指针,将读取参数传入. 同时设置写指针,也将写入文件参数传入. 为了实现读写动作,我们需要构造一个IO工 ...