图片投射（HTML Map）自适应窗口大小，再也不用为匹配尺寸而发愁了
日期：2014-05-16 浏览次数：20769 次
图片映射（HTML Map）自适应窗口大小，再也不用为匹配尺寸而发愁了
在上一节图片映射那么拽中，我们讲了图片映射的使用方法，然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应，图片地图成了摆设，今天给大家分享一个插件，有了它，小伙伴们再也不用担心图片地图走错门了。话不多说，直接上源码：
在上一节图片映射那么拽中，我们讲了图片映射的使用方法，然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应，图片地图成了摆设，今天给大家分享一个插件，有了它，小伙伴们再也不用担心图片地图走错门了。话不多说，直接上源码：
示例HTML文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no">
<title>热区图片拖拽</title>
<script src="map.js" type="text/javascript"></script>
<script type="text/javascript">
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var bDrag=false, mouseOffset=null;
function getMouseOffset(o,e){
var _oPos=getPosition(o), _mPos=mouseCoords(e);
return {x:_mPos.x-_oPos.x,y:_mPos.y-_oPos.y};
}
function getPosition(o){
var left=0, top=0;
while(o.offsetParent){
left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
top +=o.offsetTop +(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
o=o.offsetParent;
}
left+=o.offsetLeft+(o.currentStyle?(o.currentStyle.borderLeftWidth*1).NaN0():0);
top+=o.offsetTop+(o.currentStyle?(o.currentStyle.borderTopWidth*1).NaN0():0);
return {x:left,y:top};
}
function mouseCoords(e){
if(e.pageX||e.pageY){ return {x:e.pageX,y:e.pageY}; }
return {x:e.clientX+document.body.scrollLeft-document.body.clientLeft,y:e.clientY+document.body.scrollTop-document.body.clientTop};
}
onload=function(){
var oDrag=document.getElementById('aaa'); if(!oDrag) return;
oDrag.onmousedown=function(e){
bDrag=true;
e=e||window.event;
mouseOffset=getMouseOffset(this,e); return false;
}
oDrag.onmousemove=function(e){
if(!bDrag)return;
e=e||window.event;
var _mPos = mouseCoords(e);
oDrag.style.left=(_mPos.x - mouseOffset.x)+'px';
oDrag.style.top= (_mPos.y - mouseOffset.y)+'px';
return false;
}
oDrag.onmouseup=function(){ bDrag = false; mouseOffset=null;}
var arm_img=document.getElementById('emergencyImg')
cvi_map.add(arm_img,{areacolor: '#FFFF00', bordercolor: '#60F',nofade:'true' });
canvahtml=document.getElementById("emergencyImg_canvas").innerHTML;
}
/***************************缩放测试**************************************/
//已经成功缩放并且全部调整好，缩放后高亮也出现了。只是方法比较BT，你需要自己到map.js里找更好的方式
function aa(){
var o=document.getElementById('emergencyImg')
cvi_map.remove(o);
var W1=o.offsetWidth,H1=o.offsetHeight;
var windowsWidth = document.documentElement.clientWidth * 0.7;
var windowHeight = document.documentElement.clientHeight * 0.7;
o.style.width=windowsWidth+'px';o.style.height=windowHeight+'px';
var W2=o.offsetWidth,H2=o.offsetHeight;
var rW=W2/W1, rH=H2/H1;
var areaLendth = document.getElementsByTagName('area').length;
for(var k=0;k<areaLendth;k++){
var coords=document.getElementsByTagName('area')[k].getAttribute('coords');
var arrCoords=coords.split(',');
for(var i=0;i<arrCoords.length;i++){
arrCoords[i]=i%2==0?parseInt(arrCoords[i]*rW):parseInt(arrCoords[i]*rH);
}
document.getElementsByTagName('area')[k].setAttribute('coords',arrCoords.join(','))
cvi_map.add(o,{areacolor: '#FFFF00', bordercolor: '#60F',nofade:'true' });
}
}
</script>
</head>
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
