地图热区随屏幕大小改变

今天学习了地图热区的制作，热区随页面大小换算

先给图片添加map

<div>
<img src='fg.png' width='100%' heigh='100%' usemap='#pagemap' border='0'/>
<map id="CribMap" name="pagemap"><area shape="poly" id="41" coords="244,90,244,210,322,210,295,150,322,90" href="#" title="凤德岭"
/><area shape="poly" id="43" coords="350,90,350,210,433,210,461,150,405,90" href="#" title="天堂围"
/><area shape="poly" id="42" coords="241,240,241,360,309,360,322,300,295,240" href="#" title="竹塘"/><area shape="poly" id="44" coords="240,390,240,510,364,510,350,450,336,390" href="#" title="黄洞"/>
</map>
</div>

图片大小随页面变化，用js换算

<script type="text/javascript">adjust();var timeout = null;//onresize触发次数过多，设置定时器window.onresize = function () {clearTimeout(timeout);timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化，重新加载页面以刷新MAP}//获取MAP中元素属性function adjust() {var map = document.getElementById("CribMap");var element = map.childNodes;var itemNumber = element.length / 2;for (var i = 0; i < itemNumber - 1; i++) {var item = 2 * i + 1;var oldCoords = element[item].coords;var newcoords = adjustPosition(oldCoords);element[item].setAttribute("coords", newcoords);}var test = element;}//调整MAP中坐标function adjustPosition(position) {var pageWidth = document.body.clientWidth;//获取页面宽度var pageHeith = document.body.clientHeight;//获取页面高度var imageWidth = 1160; //图片的长宽var imageHeigth = 990;var each = position.split(",");//获取每个坐标点for (var i = 0; i < each.length; i++) {each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐标i++;each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐标}//生成新的坐标点var newPosition = "";for (var i = 0; i < each.length; i++) {newPosition += each[i];if (i < each.length - 1) {newPosition += ",";}}return newPosition;}
</script>

转载自https://blog.csdn.net/crystalwood/article/details/13533401#commentBox

地图热区随屏幕大小改变相关推荐

java应用窗口大小_java 如何让程序窗口随屏幕大小改变 | 学步园
这个问题一直困扰我很长时间了,虽然工作了一段时间,但感觉连这个问题都解决不好的话,实在对不起自己.今天我终于抽出时间,好好网上找了下资料,然后写了个简单的记事本程序,感觉是我想要的结果.所以在这里把程 ...
java 改变窗口大小_java 如何让程序窗口随屏幕大小改变
这个问题一直困扰我很长时间了,虽然工作了一段时间,但感觉连这个问题都解决不好的话,实在对不起自己.今天我终于抽出时间,好好网上找了下资料,然后写了个简单的记事本程序,感觉是我想要的结果.所以在这里把程 ...
HTML坐标不随着屏幕大小改变,HTML热区map坐标，随窗口大小自适应办法（javascript）...
为图片添加MAP: /> /> /> /> 图片大小随页面变化,需要MAP中每个area的坐标也随页面等比例变化. Javascript实现: adjust(); var ti ...
echarts 随屏幕大小改变大小chart.resize()
在同一页面中存在多个图表,chart.resize();其中之一不起作用. Echarts同一页面多个图表自适应浏览器窗口大小--window.onresize 当前做的一个项目中,频繁使用到百度团队 ...
anguler 画面布局适应屏幕大小_前端开发常见的五大布局模式，绝对不要错过这篇分享！...
点击上方蓝字关注我哦前端五大常见布局前端5种常见布局方式作为前端开发工程师,布局方式有多种,对于不同的场景可以使用不同的布局方式,但是很多刚参加工作的同学对于这些不是很了解,那么我们就先来简单的来 ...
大屏：页面在不同比例屏幕的显示适配与字体随屏幕改变而改变（字体随屏幕分辨率改变自适应的问题）
页面字体采用:rem document.documentElement.style.fontSize = document.documentElement.clientWidth / 1280 + ' ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
Android官方提供的支持不同屏幕大小的全部方法
2019独角兽企业重金招聘Python工程师标准>>> 本文将告诉你如何让你的应用程序支持各种不同屏幕大小,主要通过以下几种办法: 让你的布局能充分的自适应屏幕根据屏幕的配置来加载 ...
QT5 获取窗口、系统屏幕大小尺寸信息，Qt 获取控件位置坐标，屏幕坐标，相对父窗体坐标
一.QT5 获取窗口大小尺寸信息 QT窗口尺寸,窗口大小和大小改变引起的事件 QResizeEvent. //窗口左上角的位置(含边框)qDebug() << this->frame ...

地图热区随屏幕大小改变

地图热区随屏幕大小改变相关推荐

最新文章

热门文章