日期:2014-05-16  浏览次数:20654 次

图片映射(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>
&