熱區創建獲取座標

<!-- 引入js文件 jquery1.9的話要單獨引入migrate -->
<!-- jquery.image-maps.js 創建熱區獲取座標等操作 -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.image-maps.js"></script>
<script type="text/javascript">
    $(function(){
        $('#imgMap').imageMaps();
    });
</script>

<label>區域：</label>
<div id="imgMap">
    <input type="hidden" id="picArea" value="${picture.area }" />
    <img id="area_img" src="${picture.pic_url}" name="test" width="417" height="264" data-type="upt" border="0" usemap="#Map" ref='imageMaps' />
    <map name="Map">
        <area id="imgs_map" shape="rect" coords="203,134,383,187" href="http://yiye.name" />
    </map>
</div>

var index= $(".link-conrainer").find('.map-link').length;
var _area = "";
var first = "text"; //默認爲文字內容 
$(".link-conrainer .map-link").each(function(i,item){
    var _index = eval(index-1);
    var num = $(item).find("input[id='area']").val();	//console.log(num);//座標及寬高
    var t = $(item).find("select").val();	//console.log(t);	 //類別
    if(t=="圖片"){
        first = "picture";
    }
    if(t=="鏈接"){
        first = "url";
    }
    var text = $(item).find("input[name='text']").val();

    //console.log(text);	 //區域內容
    //最後一次循環不添加分隔符
    if(_index==i){ 
        _area = _area+first+":"+num+","+text;
    }else{
        _area = _area+first+":"+num+","+text+"|";
    }
});
console.log(_area);

jquery.image-maps.js內容如下：

(function($) {
    jQuery.fn.imageMaps = function(setting) {
        var $container = this;
        if ($container.length == 0) return false;
		$container.each(function(){
			var container = $(this);
			var $images = container.find('img[ref=imageMaps]');
			$images.wrap('<div class="image-maps-conrainer" style="position:relative;"></div>').css('border','1px solid #ccc');
			$images.each(function(){
				var _img_conrainer = $(this).parent();
				_img_conrainer.append('<div class="button-conrainer" style="margin-left:120px;margin-top:8px;margin-bottom:10px;"><input type="button" style="padding:10px;" value="添加區域" /></div>').append('<div class="link-conrainer" style="margin-left:120px;"></div>').append($.browser.msie ? $('<div class="position-conrainer" style="position:absolute"></div>').css({
					background:'#fff',
					opacity:0
				}) : '<div class="position-conrainer" style="position:absolute"></div>');
				var _img_offset = $(this).offset();
				var _img_conrainer_offset = _img_conrainer.offset();
				_img_conrainer.find('.position-conrainer').css({
					top: _img_offset.top - _img_conrainer_offset.top,
					left: _img_offset.left - _img_conrainer_offset.left,
					width:$(this).width(),
					height:$(this).height(),
					border:'1px solid transparent'
				});
				//縮放區域獲取座標
				var map_name = $(this).attr('usemap').replace('#','');
				var map_type = $(this).attr('data-type');
				if(map_name !=''){
					if(map_type=='add'){ //添加
						var index = 1;
						var _link_conrainer = _img_conrainer.find('.link-conrainer'); 
						var _position_conrainer = _img_conrainer.find('.position-conrainer'); 
						var image_param = $(this).attr('name') == '' ? '' : '['+ $(this).attr('name') + ']';
						container.find('map[name='+map_name+']').find('area[shape=rect]').each(function(){
							var coords = $(this).attr('coords'); 
							_link_conrainer.append('<div ref="'+index+'" class="map-link" style="margin-bottom:10px;"><span class="link-number-text">區域 '+index+'</span> :  '
									+'<input style="width:120px;" type="text" class="rect-value dfinput" id="area" name="rect'+image_param+'[]" value="'+coords+'" readonly="readonly" />'
									+'  <span class="link-number-text">類型 </span> :  '
									+'<select class="select2" style="border:1px solid #a7b5bc;padding:5px;opacity:1;width:80px;padding-bottom: 9px;" name="sel_'+index+'" >'
									+'<option value="圖片">圖片</option><option value="鏈接">鏈接</option>'
									+'<option value="文字" selected="selected">文字</option></select>'
									+'  <span class="link-number-text">默認內容</span> :  '
									+'<input type="text" class="dfinput" id="text" name="text" value=""  />'
									+'</div>');
							coords = coords.split(',');
							_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2]-coords[0])+'px;height:'+(coords[3]-coords[1])+'px;"><div class="map-position-bg"></div><span class="link-number-text">Link '+index+'</span><span class="delete">X</span><span class="resize"></span></div>');
							index++;
						});
					}else if(map_type=='upt'){ //修改
						var area = $("#picArea").val();
						var areas= new Array(); 
						areas=area.split("|"); 
						uptAreaData(areas);
					}
				}
			});
			
		});
		
		//添加一個矩形區域  
		$('.button-conrainer input[type=button]').click(function(){
			var _link_conrainer = $(this).parent().parent().find('.link-conrainer');
			var _position_conrainer = $(this).parent().parent().find('.position-conrainer');
			var index = _link_conrainer.find('.map-link').length +1;
			var image = $(this).parent().parent().find('img[ref=imageMaps]').attr('name');
			image = (image == '' ? '' : '['+ image + ']');
			_link_conrainer.append('<div ref="'+index+'" class="map-link" style="margin-bottom:10px;"><span class="link-number-text">區域 '+index+'</span> :  '
					+'<input style="width:120px;" type="text" class="rect-value dfinput" id="area" name="rect'+image+'[]" value="10,10,100,40" readonly="readonly" />'
					+'  <span class="link-number-text">類型 </span> :  '
					+'<select class="select2" style="border:1px solid #a7b5bc;padding:5px;opacity:1;width:80px;padding-bottom: 9px;" name="sel_'+index+'" >'
					+'<option value="圖片">圖片</option><option value="鏈接">鏈接</option>'
					+'<option value="文字" selected="selected">文字</option></select>'
					+'  <span class="link-number-text">默認內容</span> :  '
					+'<input type="text" class="dfinput" id="text" name="text" value=""  /></div>');
			//在圖片上添加一個矩形區域
			_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:10px;top:10px;width:90px;height:30px;"><div class="map-position-bg"></div><span class="link-number-text">區域 '+index+'</span><span class="delete">X</span><span class="resize"></span></div>');
			bind_map_event();
			define_css();
			
		});
		
		//遍歷數據 獲取區域信息 
		function uptAreaData(areas){
			for (i=0;i<areas.length ;i++ ){
				var area = areas[i]; //某個區域
				var type= area.substring(0,area.indexOf(":"));  //截取內容分類
				var str = area.substring(area.indexOf(":")+1,area.length); 
				var data= new Array();  //座標、寬、高以及默認內容
				data=str.split(","); 
				var x = data[0];
				var y = data[1];
				var w = data[2];
				var h = data[3];
				var text = data[4];
				setAreaData(type,x,y,w,h,text);
			}
		};
		
		//通過設置數值創建區域
		function setAreaData(type,x,y,w,h,text){
			
			var item = $('.button-conrainer input[type=button]');
			var _link_conrainer = $("#imgMap").find('.link-conrainer');
			var _position_conrainer = $("#imgMap").find('.position-conrainer');
			var index = _link_conrainer.find('.map-link').length +1;
			var image = $("#imgMap").find('img[ref=imageMaps]').attr('name');
			image = (image == '' ? '' : '['+ image + ']');
			
			var str = '<div ref="'+index+'" class="map-link" style="margin-bottom:10px;"><span class="link-number-text">區域 '+index+'</span> :  '
			+'<input style="width:120px;" type="text" class="rect-value dfinput" id="area" name="rect'+image+'[]" value="'+x+','+y+','+w+','+h+'" readonly="readonly" />'
			+'  <span class="link-number-text">類別 </span> :  '
			+'<select class="select2" style="border:1px solid #a7b5bc;padding:5px;opacity:1;width:80px;padding-bottom: 9px;" name="sel_'+index+'" >';
			if(type=='text'){
				str = str+'<option value="文字" selected="selected">文字</option>'
			}else{
				str = str+'<option value="文字" >文字</option>'
			}
			if(type=='picture'){
				str = str+'<option value="圖片" selected="selected">圖片</option>'
			}else{
				str = str+'<option value="圖片" >圖片</option>'
			}
			if(type=='url'){
				str = str+'<option value="鏈接" selected="selected">鏈接</option>'
			}else{
				str = str+'<option value="鏈接" >鏈接</option>'
			}
			str = str+'</select>  <span class="link-number-text">默認內容</span> :  '
			+'<input type="text" class="dfinput" id="text" name="text" value="'+text+'"  /></div>';
			_link_conrainer.append(str)		//顯示區域座標以及該區域的類別
			//在圖片上添加一個矩形區域
			_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:'+x+'px;top:'+y+'px;width:'+w+'px;height:'+h+'px;"><div class="map-position-bg"></div><span class="link-number-text">區域 '+index+'</span><span class="delete">X</span><span class="resize"></span></div>');
			bind_map_event();
			define_css();
		}
		
		
		//綁定map事件
		function bind_map_event(){
			$('.position-conrainer .map-position .map-position-bg').each(function(){  //移動區域獲取座標
				var map_position_bg = $(this);  //某個區域
				var conrainer = $(this).parent().parent();
				map_position_bg.unbind('mousedown').mousedown(function(event){
					map_position_bg.data('mousedown', true);
					map_position_bg.data('pageX', event.pageX);
					map_position_bg.data('pageY', event.pageY);
					map_position_bg.css('cursor','move');
					return false;
				}).unbind('mouseup').mouseup(function(event){
					map_position_bg.data('mousedown', false);
					map_position_bg.css('cursor','default');
					return false;
				});
				conrainer.mousemove(function(event){
					if (!map_position_bg.data('mousedown')) return false;
                    var dx = event.pageX - map_position_bg.data('pageX');
                    var dy = event.pageY - map_position_bg.data('pageY');
                    if ((dx == 0) && (dy == 0)){
                        return false;
                    }
					var map_position = map_position_bg.parent();
					var p = map_position.position();
					var left = p.left+dx;
					if(left <0) left = 0;
					var top = p.top+dy;
					if (top < 0) top = 0;
					var bottom = top + map_position.height();
					if(bottom > conrainer.height()){
						top = top-(bottom-conrainer.height());
					}
					var right = left + map_position.width();
					if(right > conrainer.width()){
						left = left-(right-conrainer.width());
					}
					map_position.css({
						left:left,
						top:top
					});
					map_position_bg.data('pageX', event.pageX);
					map_position_bg.data('pageY', event.pageY);
					//右下角座標
					bottom = top + map_position.height(); 
					right = left + map_position.width();
					//$('.link-conrainer p[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
					console.log("座標爲:"+left+","+top+","+right+","+bottom);
					
					//左上角座標  寬度，高度
					$('.link-conrainer div[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,map_position.width(),map_position.height()).join(','));
					return false;
				}).mouseup(function(event){
					map_position_bg.data('mousedown', false);
					map_position_bg.css('cursor','default');
					return false;
				});
			});
			$('.position-conrainer .map-position .resize').each(function(){  //拖動縮放更改座標值
				var map_position_resize = $(this);
				var conrainer = $(this).parent().parent();
				map_position_resize.unbind('mousedown').mousedown(function(event){
					map_position_resize.data('mousedown', true);
					map_position_resize.data('pageX', event.pageX);
					map_position_resize.data('pageY', event.pageY);
					return false;
				}).unbind('mouseup').mouseup(function(event){
					map_position_resize.data('mousedown', false);
					return false;
				});
				conrainer.mousemove(function(event){
					if (!map_position_resize.data('mousedown')) return false;
                    var dx = event.pageX - map_position_resize.data('pageX');
                    var dy = event.pageY - map_position_resize.data('pageY');
                    if ((dx == 0) && (dy == 0)){
                        return false;
                    }
					var map_position = map_position_resize.parent();
					var p = map_position.position();
					var left = p.left;
					var top = p.top;
					var height = map_position.height()+dy;
					if((top+height) > conrainer.height()){
						height = height-((top+height)-conrainer.height());
					}
					if (height <20) height = 20;
					var width = map_position.width()+dx;
					if((left+width) > conrainer.width()){
						width = width-((left+width)-conrainer.width());
					}
					if(width <50) width = 50;
					map_position.css({
						width:width,
						height:height
					});
					map_position_resize.data('pageX', event.pageX);
					map_position_resize.data('pageY', event.pageY);
					
					bottom = top + map_position.height();
					right = left + map_position.width();
					//$('.link-conrainer div[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,right,bottom).join(','));
					$('.link-conrainer div[ref='+map_position.attr('ref')+'] .rect-value').val(new Array(left,top,map_position.width(),map_position.height()).join(','));
					return false;
				}).mouseup(function(event){
					map_position_resize.data('mousedown', false);
					return false;
				});
			});
			$('.position-conrainer .map-position .delete').unbind('click').click(function(){
				var ref = $(this).parent().attr('ref');
				var _link_conrainer = $(this).parent().parent().parent().find('.link-conrainer');
				var _position_conrainer = $(this).parent().parent().parent().find('.position-conrainer');
				_link_conrainer.find('.map-link[ref='+ref+']').remove();
				_position_conrainer.find('.map-position[ref='+ref+']').remove();
				var index = 1;
				_link_conrainer.find('.map-link').each(function(){
					$(this).attr('ref',index).find('.link-number-text').html('區域 '+index);
					index ++;
				});
				index = 1;
				_position_conrainer.find('.map-position').each(function(){
					$(this).attr('ref',index).find('.link-number-text').html('區域 '+index);
					index ++;
				});
			});
		}
		
		bind_map_event();
		
		function define_css(){
			//樣式定義
			$container.find('.map-position').css({
				position:'absolute',
				border:'1px solid #000',
				'font-weight':'bold'
			});
			$container.find('.map-position .map-position-bg').css({
				position:'absolute',
				background:'#0F0',
				opacity:0.5,
				top:0,
				left:0,
				right:0,
				bottom:0
			});
			$container.find('.map-position .resize').css({
				display:'block',
				position:'absolute',
				right:0,
				bottom:0,
				width:5,
				height:5,
				cursor:'nw-resize',
				background:'#000'
			});
			$container.find('.map-position .delete').css({
				display:'block',
				position:'absolute',
				right:0,
				top:0,
				width:10,
				height:12,
				'line-height':'11px',
				'font-size':12,
				'font-weight':'bold',
				background:'#000',
				color:'#fff',
				'font-family':'Arial',
				'padding-left':'2px',
				cursor:'pointer',
				opactiey : 1
			});
		}
		define_css();
    };
})(jQuery);