本文主要是介绍图片映射（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};
}οnlοad=function(){var oDrag=document.getElementById('aaa'); if(!oDrag) return;oDrag.οnmοusedοwn=function(e){bDrag=true;e=e||window.event;mouseOffset=getMouseOffset(this,e); return false; }oDrag.οnmοusemοve=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.οnmοuseup=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>
<body><div id=aaa style="_position:relative;text-align:center;margin:auto auto;"><img id="emergencyImg" src="autoResizeMap.png" border="0" width="1226" height="620" orgWidth="1226" orgHeight="620" usemap="#emergencyMap" alt="" /><map name="emergencyMap" id="emergencyMap"><area alt="" title="火灾事故专项应急预案详情" href="" shape="rect" coords="59,284,96,580" style="outline:none;" target="_blank" /><area alt="" title="自然灾害专项应急预案" href="" shape="rect" coords="107,284,144,580" style="outline:none;" target="_blank" /><area alt="" title="特种设备事故专项应急预案" href="" shape="rect" coords="152,284,189,580" style="outline:none;" target="_blank" /><area alt="" title="机械伤害事故专项应急预案详情" href="" shape="rect" coords="197,284,234,580" style="outline:none;" target="_blank" /><area alt="" title="触电事故专项应急预案详情" href="" shape="rect" coords="245,284,282,580" style="outline:none;" target="_blank" /><area alt="" title="窒息专项应急预案详情" href="" shape="rect" coords="293,284,330,580" style="outline:none;" target="_blank" /><area alt="" title="高处坠落事故专项应急预案详情" href="" shape="rect" coords="342,284,379,580" style="outline:none;" target="_blank" /><area alt="" title="突发停电事故专项应急预案详情" href="" shape="rect" coords="392,284,429,580" style="outline:none;" target="_blank" /><area alt="" title="食物中毒事件专项应急预案详情" href="" shape="rect" coords="438,284,475,580" style="outline:none;" target="_blank" /><area alt="" title="突发性安全事件专项应急预案详情" href="" shape="rect" coords="488,284,525,580" style="outline:none;" target="_blank" /><area alt="" title="流行性传染病专项应急预案详情" href="" shape="rect" coords="535,284,572,580" style="outline:none;" target="_blank" /><area shape="rect" coords="1224,618,1226,620" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_11407" /></map>&这篇关于图片映射（HTML Map）自适应窗口大小，再也不用为匹配尺寸而发愁了的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
