图片映射（HTML Map）自适应窗口大小，再也不用为匹配尺寸而发愁了

最新推荐文章于 2024-06-22 09:41:11 发布

shehun1

最新推荐文章于 2024-06-22 09:41:11 发布

阅读量1.9w

点赞数 3

分类专栏： Flex开发文章标签： canvas 图片地图 Image MAP

本文链接：https://blog.csdn.net/shehun1/article/details/23478629

版权

本文介绍了一个解决图片地图不能根据页面窗口大小自适应的插件，通过示例代码展示了如何使用该插件，使得图片地图在窗口缩放时仍能正常工作。文章包含HTML、JavaScript代码示例以及缩放测试功能。

摘要由CSDN通过智能技术生成

在上一节图片映射那么拽中，我们讲了图片映射的使用方法，然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应，图片地图成了摆设，今天给大家分享一个插件，有了它，小伙伴们再也不用担心图片地图走错门了。话不多说，直接上源码：

示例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>
  &

最低0.47元/天解锁文章

shehun1

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
6
评论
图片映射（HTML Map）自适应窗口大小，再也不用为匹配尺寸而发愁了

在上一节图片映射那么拽中，我们讲了图片映射的使用方法，然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应，图片地图成了摆设，今天给大家分享一个插件，有了它，小伙伴们再也不用担心图片地图走错门了。话不多说，直接上源码：示例HTML文件：热区图片拖拽Number.prototype.NaN0=function(){return isNaN(th
复制链接

扫一扫

专栏目录