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

<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

  

	
	
  
 
  
   

var canvascheck = document.createElement('canvas');
var isIE = window.navigator.systemLanguage&&(!document.documentMode||document.documentMode<9)?1:0;
var isI8 = isIE&&document.documentMode?1:0;
var isVM = isIE&&document.namespaces?1:0; 
var isCV = canvascheck.getContext?1:0;
var isJG = 0, jg = new Array();
var canvahtml;

function showCoords(map,ele,x,y,w,h) {}

function getClassValue(classes,string){
	var temp = 0; var pos = string.length;
	for (var j=0;j';
			}else if(obj.shape.toLowerCase()=='circle') {
				t += '';
			}else {
				for(j=2;j'; 
			}
		} canvas.innerHTML += t;
	}else if(isCV) {
		if(f<1) {canvas.fading = 0; canvas.style.opacity = 0;}
		context = canvas.getContext("2d");
		for(a=0;a0 && px==ex) {ex -= ox; }
		oy = self.pageYOffset; if(oy>0 && py==ey) {ey -= oy; }
	}else if(document.documentElement) {
		ox = document.documentElement.scrollLeft; 
		oy = document.documentElement.scrollTop;
	}else if(document.body) {
		ox = document.body.scrollLeft; oy = document.body.scrollTop;
	} 
	if(document.body.scrollHeight!=ph||document.body.scrollWidth!=pw) {
		var o = document.getElementById(i);
		var t = findPosXY(o); x = t.x; y = t.y;
	}
	cx = Math.min(Math.max(ex+ox-x,0),w); 
	cy = Math.min(Math.max(ey+oy-y,0),h);
	showCoords(n,a,cx,cy,w,h);
}
function findPosXY(ele) {
	var t; var d = {x:ele.offsetLeft, y:ele.offsetTop };
	if(ele.offsetParent) { t = findPosXY(ele.offsetParent); d.x += t.x; d.y += t.y;}
	return d;
}
function roundedRect(ctx,x,y,width,height,radius,nopath){
	if (!nopath) ctx.beginPath();
	ctx.moveTo(x,y+radius);
	ctx.lineTo(x,y+height-radius);
	ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
	ctx.lineTo(x+width-radius,y+height);
	ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
	ctx.lineTo(x+width,y+radius);
	ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
	ctx.lineTo(x+radius,y);
	ctx.quadraticCurveTo(x,y,x,y+radius);
	if (!nopath) ctx.closePath();
}
function getRadius(radius,width,height){
	var part = (Math.min(width,height)/100);
	radius = Math.max(Math.min(100,radius/part),0);
	return radius + '%';
}




var cvi_map = {
	defaultRadius : 0,
	defaultOpacity : 33,
	defaultBordercolor : '#0000ff',
	defaultAreacolor : '#000000',
	defaultNoborder : false,
	defaultNofade : false,
	defaultShowcoords : false,
	defaultImgsrc : '',
	defaultMapid : '',
	defaultDelayed : false,
	add: function(image, options) {
		var w=image.offsetWidth;
		var h=image.offsetHeight;
		
		var map, mapname = image.useMap.split("#");
		if(mapname[1]!=''&&mapname[1].length>=1) {map = document.getElementsByName(mapname[1])[0];}
		if(image.tagName.toUpperCase() == "IMG" && map) {
			var defopts = { "radius" : cvi_map.defaultRadius, "opacity" : cvi_map.defaultOpacity, "bordercolor" : cvi_map.defaultBordercolor, "areacolor" : cvi_map.defaultAreacolor, "noborder" : cvi_map.defaultNoborder, "nofade" : cvi_map.defaultNofade, "showcoords" : cvi_map.defaultShowcoords, "imgsrc" : cvi_map.defaultImgsrc, "mapid" : cvi_map.defaultMapid, "delayed" : cvi_map.defaultDelayed };
			if(options) {
				for(var i in defopts) { if(!options[i]) { options[i] = defopts[i]; }}
			}else {
				options = defopts;
			}
			var imageWidth  = ('iwidth'  in options) ? parseInt(options.iwidth)  : image.width;
			var imageHeight = ('iheight' in options) ? parseInt(options.iheight) : image.height;
			try {
				var object = image.parentNode;
				object.style.position = (object.style.position=='static'||object.style.position==''?'relative':object.style.position);
				object.style.height = image.height+'px';
				object.style.width = image.width+'px';
				object.style.padding = 0+'px';
				object.style.MozUserSelect = "none";
				object.style.KhtmlUserSelect = "none"; 
				object.unselectable = "on";
				var blind, bgrnd, canvas; image.jg = 0;
				if(isVM) {
					if(document.namespaces['v']==null) {
						var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); 
						for(var i=0; i'].join(''));
					bgrnd = document.createElement([''].join(''));
					dummy = document.createElement([''].join(''));// NEW
				}else if(isCV) {
					canvas = document.createElement('canvas');
					bgrnd = document.createElement('canvas');
				}else {
					canvas = document.createElement('p');
					bgrnd = document.createElement('img'); 
					bgrnd.src = image.src;
					if(typeof(window['jsGraphics']) !== 'undefined') {
						image.jg = parseInt(jg.length);
						jg[image.jg] = new jsGraphics(canvas); isJG = 1;
					}
				}
				canvas.id = image.id+'_canvas';
				canvas.style.height = image.height+'px';
				canvas.style.width = image.width+'px';
				canvas.height = image.height;
				canvas.width = image.width;
				canvas.left = 0; canvas.top = 0;
				canvas.style.position = 'absolute';
				canvas.style.left = 0+'px';
				canvas.style.top = 0+'px';
				canvas.fading = 0;
				image.className = '';
				image.style.cssText = '';
				image.left = 0; image.top = 0;
				image.style.position = 'absolute';
				
				/***********这里***************/
				image.style.height = h+'px';
				image.style.width = w+'px';
				/***************************/
				
				image.style.left = 0+'px';
				image.style.top = 0+'px';
				image.style.MozUserSelect = "none";
				image.style.KhtmlUserSelect = "none"; 
				image.unselectable = "on";
				image.options = options;
				image.canvasid = image.id+'_canvas';
				image.dummyid = image.id+'_dummy'; // NEW
				image.bgrndid = image.id+'_image';
				image.blindid = map.name+'_blind';
				image.mapname = map.name;
				image.areas = map.innerHTML;
				image.active = false;
				if(isIE) {image.style.filter = "Alpha(opacity=0)";}else {image.style.opacity = 0; image.style.MozOpacity = 0; image.style.KhtmlOpacity = 0;}
				bgrnd.id = image.bgrndid;
				bgrnd.left = 0; bgrnd.top = 0;
				bgrnd.style.position = 'absolute';
				bgrnd.style.height = image.height+'px';
				bgrnd.style.width = image.width+'px';
				bgrnd.style.left = 0+'px';
				bgrnd.style.top = 0+'px';
				bgrnd.height = image.height; 
				bgrnd.width = image.width;				
				blind = document.createElement('p');
				blind.id = image.blindid;
				blind.className = "blind_area";
				blind.left = 0; blind.top = 0;
				blind.style.position = 'absolute';
				blind.style.height = image.height+'px';
				blind.style.width = image.width+'px';
				blind.style.left = 0+'px';
				blind.style.top = 0+'px';
				blind.innerHTML = " ";
				object.insertBefore(canvas,image);
				object.insertBefore(bgrnd,canvas);
				object.insertBefore(blind,image);
				cvi_map.modify(image, options);
			} catch (e) {}
		}
	},




	modify: function(image, options) {
		try {		
			var radius = (typeof options['radius']=='number'?options['radius']:image.options['radius']); image.options['radius']=radius;
			var opacity = (typeof options['opacity']=='number'?options['opacity']:image.options['opacity']); image.options['opacity']=opacity;
			var bcolor = (typeof options['bordercolor']=='string'?options['bordercolor']:image.options['bordercolor']); image.options['bordercolor']=bcolor;
			var acolor = (typeof options['areacolor']=='string'?options['areacolor']:image.options['areacolor']); image.options['areacolor']=acolor;
			var noborder = (typeof options['noborder']=='boolean'?options['noborder']:image.options['noborder']); image.options['noborder']=noborder;
			var nofade = (typeof options['nofade']=='boolean'?options['nofade']:image.options['nofade']); image.options['nofade']=nofade;
			var showcoords = (typeof options['showcoords']=='boolean'?options['showcoords']:image.options['showcoords']); image.options['showcoords']=showcoords;
			var delayed = (typeof options['delayed']=='boolean'?options['delayed']:image.options['delayed']); image.options['delayed']=delayed;
			var imgsrc = (typeof options['imgsrc']=='string'?options['imgsrc']:image.options['imgsrc']); image.options['imgsrc']=imgsrc;
			var mapid = (typeof options['mapid']=='string'?options['mapid']:image.options['mapid']); image.options['mapid']=mapid;
			
			/*******************还有这里***************************************/
			var context, func, ih = image.offsetHeight, iw = image.offsetWidth;
			/*******************************************************************/
			
			var radius = parseInt(Math.min(Math.min(iw/4,ih/4),radius));
			var opacity = opacity==0?0.33:opacity/100; 
			var bcolor = performRGBColor(bcolor,'#0000ff');
			var acolor = performRGBColor(acolor,'#000000');	
			var canvas = document.getElementById(image.canvasid);
			var dummy = document.getElementById(image.dummyid);
			var bgrnd = document.getElementById(image.bgrndid);
			var map = document.getElementsByName(image.mapname)[0];
			var opac = 100;
			function replace() {
				if(mapid!='') {
					var tmp = document.getElementById(mapid);
					if(tmp) {map.innerHTML = tmp.innerHTML;}
				}else {
					map.innerHTML = image.areas; 
				}
			}
			function prepare() {
				if(!delayed) {replace();}
				for(var j=0;jseover; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);}
								map.areas[j].onmouseover = new Function('setAreaOver(this,"'+canvas.id+'","'+bcolor+'","'+acolor+'",'+opacity+','+noborder+','+nofade+','+image.jg+');'+func); 
								func=map.areas[j].onmouseout; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);}
								map.areas[j].onmouseout = new Function('setAreaOut(this,"'+canvas.id+'",'+nofade+','+image.jg+');'+func); 
							}else {
								func = map.areas[j].getAttribute("onmouseover"); map.areas[j].setAttribute("onmouseover","setAreaOver(this,'"+canvas.id+"','"+bcolor+"','"+acolor+"',"+opacity+","+noborder+","+nofade+","+image.jg+");"+func); 
								func = map.areas[j].getAttribute("onmouseout"); map.areas[j].setAttribute("onmouseout","setAreaOut(this,'"+canvas.id+"',"+nofade+","+image.jg+");"+func); 
							}
						}
					}
				}
				if(showcoords) {
					var atr, t = findPosXY(image), ph = document.body.scrollHeight, pw = document.body.scrollWidth;
					if(isVM||isIE) {
						image.onmousemove = new Function('getCoords(event,"'+image.mapname+'",0,"'+image.id+'",'+t.x+','+t.y+','+iw+','+ih+','+pw+','+ph+');'+image.movefunc); 
					}else {
						image.setAttribute("onmousemove","getCoords(event,'"+image.mapname+"',0,'"+image.id+"',"+t.x+","+t.y+","+iw+","+ih+","+pw+","+ph+");"+image.movefunc); 
					}
					if(map.length>0) {
						for(var j=0;j=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);}
										map.areas[j].onmousemove = new Function('getCoords(event,"'+image.mapname+'","'+atr+'","'+image.id+'",'+t.x+','+t.y+','+iw+','+ih+','+pw+','+ph+');'+func); 
									}else {
										func = map.areas[j].getAttribute("onmousemove"); map.areas[j].setAttribute("onmousemove","getCoords(event,'"+image.mapname+"','"+atr+"','"+image.id+"',"+t.x+","+t.y+","+iw+","+ih+","+pw+","+ph+");"+func); 
									}
								}
							}
						}
					}
				}
			}
			if(canvas && bgrnd && map) {
				if(isCV) {
					context = canvas.getContext("2d");
					context.clearRect(0,0,canvas.width,canvas.height);
				}else if(isVM) {
					canvas.innerHTML = '';
				}else {
					if(isIE) {canvas.style.filter = "Alpha(opacity="+(opacity*100)+")";}else { canvas.style.opacity = opacity; canvas.style.MozOpacity = opacity; canvas.style.KhtmlOpacity = opacity;} 
					if(isJG) {jg[image.jg].clear();}
				}
				if(delayed) {replace();	}
				if(isCV) {
					if(imgsrc!='') {
						var img = new Image();
						img.onload = function() {
							context = bgrnd.getContext("2d");
							context.clearRect(0,0,bgrnd.width,bgrnd.height);
							context.save();
							if(radius>0) {
								roundedRect(context,0,0,bgrnd.width,bgrnd.height,radius);
								context.clip();
							}
							context.fillStyle = 'rgba(0,0,0,0)';
							context.fillRect(0,0,bgrnd.width,bgrnd.height);
							context.drawImage(img,0,0,bgrnd.width,bgrnd.height);
							context.restore();
							prepare();
						}
						img.src = imgsrc;
					}else {	
						context = bgrnd.getContext("2d");
						context.clearRect(0,0,bgrnd.width,bgrnd.height);
						context.save();
						if(radius>0) {
							roundedRect(context,0,0,bgrnd.width,bgrnd.height,radius);
							context.clip();
						}
						context.fillStyle = 'rgba(0,0,0,0)';
						context.fillRect(0,0,bgrnd.width,bgrnd.height);
						context.drawImage(image,0,0,bgrnd.width,bgrnd.height);
						context.restore();
						prepare();
					}
				}else if(isVM) {
					if(radius>0) {radius = getRadius(radius,bgrnd.width,bgrnd.height);}	
					bgrnd.innerHTML = '';
					prepare();
				}else {
					bgrnd.src = imgsrc!=''?imgsrc:image.src;
					prepare();
				} image.active = true;
				if(isVM||isIE) {
					func = image.onmousemove; if(func!=null) {tmp=String(func); func=(tmp.indexOf('function')>=0?tmp.match(/\{([^}]+)\}/):tmp); func=(typeof(func)=='object'?func[1]:func);} image.movefunc = func;
				}else {
					image.movefunc = image.getAttribute("onmousemove"); 
				}
			}
		} catch (e) {}
	},

	remove : function(image) {
		var ele, object = image.parentNode;
		if(image.active) {
			if(isIE) { image.style.filter = "Alpha(opacity=100)";}else {image.style.opacity = 100; image.style.MozOpacity = 100; image.style.KhtmlOpacity = 100;}
			ele = document.getElementsByName(image.mapname)[0]; ele.innerHTML = image.areas; image.active = false; image.areas = ''; 	
			if(isVM||isIE) {image.onmousemove = image.movefunc;}else {image.setAttribute("onmousemove",image.movefunc);}
			ele = document.getElementById(image.canvasid); if(ele) {object.removeChild(ele);}
			ele = document.getElementById(image.blindid); if(ele) {object.removeChild(ele);}
			ele = document.getElementById(image.bgrndid); if(ele) {object.removeChild(ele);}
		}
	}
}