图片映射(HTML Map)自适应窗口大小,再也不用为

当前位置 : 首页 > 网页制作 > CSS > 图片映射(HTML Map)自适应窗口大小,再也不用为

图片映射(HTML Map)自适应窗口大小,再也不用为

来源: 作者: 时间:2016-01-25 10:01
在上一节图片映射那么拽中,我们讲了图片映射的使用方法,然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应,图片地图成了摆设,今天给大家分享一个插件,有了它,小
在上一节图片映射那么拽中,我们讲了图片映射的使用方法,然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应,图片地图成了摆设,今天给大家分享一个插件,有了它,小伙伴们再也不用担心图片地图走错门了。话不多说,直接上:
示例HTML文件:





热区图片拖拽



<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 Width = 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;kver; 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);}
		}
	}
}


显示的效果图: \


Tag:
网友评论

<