建立熱區獲取座標

1.引入js

<!-- 引入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> 

2.頁面

<label>區域<b>*</b></label>
<div id="imgMap" >
　　<img id="area_img" src="" style="border: solid 1px #a7b5bc;" name="test" border="0" data-type="add" usemap="#Map" ref='imageMaps' />
　　<i id="areaError" style="margin-left: 100px; class="tishi">請添加熱區</i>
　　<map name="Map">
　　　　<area shape="rect" coords="0,0,0,0" href="javascript:;" />
　　</map>
</div>

3.js獲取區域數據（json數組，一個區域一個json對象）

//獲取區域數量 
                var index = $(".link-conrainer").find('.map-link').length;
                var jsonList = [];
                
                $(".link-conrainer .map-link").each(function(i,item){//遍歷區域

                    var jsonStr = {};  //一個區域的信息 
                    
                    var str = $(item).find("input[id='area']").val();    //console.log(num);//座標及寬高
                    var data= new Array();  //座標、寬、高
                    data=str.split(","); 
                    jsonStr.left = data[0];
                    jsonStr.top = data[1];
                    jsonStr.width = data[2];
                    jsonStr.height = data[3];
                    jsonStr.con_type =  $(item).find("select[name='sel_"+(i+1)+"']").val(); //類別
                    jsonStr.coordinates = data[0]+","+data[1];
                    jsonStr.context = $(item).find("input[name='text']").val();//console.log(text);     //區域內容
                    
                    var font = $(item).find("select[name='font']").val();
                    if(font=='undefined'||font==undefined){
                        jsonStr.font = "";
                    }else{
                        jsonStr.font = font;
                    }
                    
                    var fontSize = $(item).find("input[name='font_size']").val();
                    if(fontSize==undefined||fontSize=='undefined'){
                        jsonStr.font_size = "";
                    }else{
                        jsonStr.font_size = fontSize;
                    }
                    
                    var fontColor = $(item).find("input[name='font_color']").val();
                    if(fontColor==undefined||fontColor=='undefined'){
                        jsonStr.font_color = "";
                    }else{
                        jsonStr.font_color = fontColor;
                    }
                    var angle = $(item).find("input[name='angle']").val();
                    if(angle==undefined||angle=='undefined'){
                        jsonStr.angle = "";
                    }else{
                        jsonStr.angle =angle;
                    }
                    
                    var showT = $(item).find("select[name='show_type_"+(i+1)+"']").val();
                    if(showT==undefined||showT=='undefined'){
                        jsonStr.show_type = "";
                    }else{
                        jsonStr.show_type = showT;
                    }
                    jsonList.push(jsonStr); //添加到json數組 區域數組 
                    
                });

                console.log(jsonList);
                //沒有添加區域 
                if(index<=0){
                    $('#areaError').css('color','red');
                    return;
                }
                var jsonListStr = JSON.stringify(jsonList);
                console.log(jsonListStr);

4.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>&nbsp;:&nbsp;&nbsp;'
                                    +'<input style="width:120px;" type="text" class="rect-value dfinput" id="area" name="rect'+image_param+'[]" value="'+coords+'" readonly="readonly" />'
                                    +'&nbsp;&nbsp;<span class="link-number-text">類型 </span>&nbsp;:&nbsp;&nbsp;'
                                    +'<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>'
                                    +'&nbsp;&nbsp;<span class="link-number-text">默認內容</span>&nbsp;:&nbsp;&nbsp;'
                                    +'<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 areaJsonList=JSON.parse(area);
                        uptAreaData(areaJsonList);
                    }
                }
            });
            
        });
        
        //添加一個矩形區域  
        $('.button-conrainer input[type=button]').click(function(){
            
            var _src = $(this).parent().parent().find('img[ref=imageMaps]').attr('src');
            if(_src==''){
                alert('請先添加背景圖');
                return;
            }
            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>&nbsp;:&nbsp;&nbsp;'
                    +'<input style="width:120px;" type="text" class="rect-value dfinput" id="area" name="rect'+image+'[]" value="10,10,100,40" readonly="readonly" />'
                    +'&nbsp;&nbsp;<span class="link-number-text">類型 </span>&nbsp;:&nbsp;&nbsp;'
                    +'<select onchange="showText('+index+');" style="border:1px solid #a7b5bc;padding:5px;opacity:1;width:80px;padding-bottom: 9px;" name="sel_'+index+'"  >'
                    +'<option value="1">圖片</option><option value="2">連接</option>'
                    +'<option value="0" selected="selected">文字</option></select>'
                    +'&nbsp;&nbsp;<span class="link-number-text">默認內容</span>&nbsp;:&nbsp;&nbsp;'
                    +'<input type="text" class="dfinput" id="text" name="text" value=""  /><br /><p style="margin-top:10px;"></p>'
                    +'</div>');
            
            
            var t = $("select[name='sel_"+index+"']").val();
            var _link_conrainer_text = $(".link-conrainer").find("div[ref='"+index+"']");
            var html = $(".font").html();
            if(t==0){
                var str = '&nbsp;&nbsp;<span class="link-number-text">字體</span>&nbsp;:&nbsp;&nbsp;'
                    +html
                    +'&nbsp;&nbsp;<span class="link-number-text">字號</span>&nbsp;:&nbsp;&nbsp;'
                    +'<input type="text" class="dfinput" id="font_size" style="width:80px;" name="font_size" value=""  />'
                    +'&nbsp;&nbsp;<span class="link-number-text">字體顏色</span>&nbsp;:&nbsp;&nbsp;'
                    +'<input type="text" class="dfinput" id="font_color" style="width:80px;" name="font_color" value=""  />'
                    +'&nbsp;&nbsp;<span class="link-number-text">垂直或水平</span>&nbsp;:&nbsp;&nbsp;'
                    +'<select class="select2" style="border:1px solid #a7b5bc;padding:5px;opacity:1;width:80px;padding-bottom: 9px;" name="show_type_'+index+'" >'
                    +'<option value="1">垂直</option>'
                    +'<option value="0" selected="selected">水平</option></select>'
                    +'&nbsp;&nbsp;<span class="link-number-text">順時針旋轉角度</span>&nbsp;:&nbsp;&nbsp;'
                    +'<input type="text" class="dfinput" id="angle" name="angle" style="width:80px;" value="0"  />';
                _link_conrainer_text.find("p").html(str);
            }else{
                _link_conrainer_text.find("p").html('');
            }
            //在圖片上添加一個矩形區域
            _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(jsonList){
            for(var i in jsonList){
                var jsonStr = jsonList[i];//某個區域
                console.log(jsonStr);
                setAreaData(jsonStr.con_type,jsonStr.left,jsonStr.top,jsonStr.width,jsonStr.height,jsonStr.context,jsonStr.font,jsonStr.font_size,jsonStr.font_color,jsonStr.showT,jsonStr.angle);
            }
        };
        
        //經過設置數值建立區域
        function setAreaData(type,x,y,w,h,text,font,size,color,showT,angle){console.log(font);
            
            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>&nbsp;:&nbsp;&nbsp;'
            +'<input style="width:120px;" type="text" class="rect-value dfinput" id="area" name="rect'+image+'[]" value="'+x+','+y+','+w+','+h+'" readonly="readonly" />'
            +'&nbsp;&nbsp;<span class="link-number-text">類別 </span>&nbsp;:&nbsp;&nbsp;'
            +'<select class="select2" style="border:1px solid #a7b5bc;padding:5px;opacity:1;width:80px;padding-bottom: 9px;" name="sel_'+index+'" >';
            if(type=='0'){
                str = str+'<option value="0" selected="selected">文字</option>'
            }else{
                str = str+'<option value="0" >文字</option>'
            }
            if(type=='1'){
                str = str+'<option value="1" selected="selected">圖片</option>'
            }else{
                str = str+'<option value="1" >圖片</option>'
            }
            if(type=='2'){
                str = str+'<option value="2" selected="selected">連接</option>'
            }else{
                str = str+'<option value="2" >連接</option>'
            }
            str = str+'</select>&nbsp;&nbsp;<span class="link-number-text">默認內容</span>&nbsp;:&nbsp;&nbsp;'
            +'<input type="text" class="dfinput" id="text" name="text" value="'+text+'"  /><p style="margin-top:10px;"></p></div>';
            _link_conrainer.append(str)        //顯示區域座標以及該區域的類別
            
            var _link_conrainer_text = $(".link-conrainer").find("div[ref='"+index+"']");
            var html = $(".font").html();
            if(type=='0'){
                var fontStr = '&nbsp;&nbsp;<span class="link-number-text" id="font_'+index+'" >字體</span>&nbsp;:&nbsp;&nbsp;'
                    +html
                    +'&nbsp;&nbsp;<span class="link-number-text">字號</span>&nbsp;:&nbsp;&nbsp;'
                    +'<input type="text" class="dfinput" id="font_size" style="width:80px;" name="font_size" value="'+size+'"  />'
                    +'&nbsp;&nbsp;<span class="link-number-text">字體顏色</span>&nbsp;:&nbsp;&nbsp;'
                    +'<input type="text" class="dfinput" id="font_color" style="width:80px;" name="font_color" value="'+color+'"  />'
                    +'&nbsp;&nbsp;<span class="link-number-text">垂直或水平</span>&nbsp;:&nbsp;&nbsp;'
                    +'<select class="select2" style="border:1px solid #a7b5bc;padding:5px;opacity:1;width:80px;padding-bottom: 9px;" name="show_type_'+index+'" >';
                    if(showT=='0'){
                        fontStr = fontStr+'<option value="0" selected="selected">水平</option>'
                    }else{
                        fontStr =fontStr+'<option value="0">水平</option>'
                    }
                    
                    if(showT=='1'){
                        fontStr = fontStr+'<option value="1"  selected="selected">垂直</option>'
                    }else{
                        fontStr = fontStr+'<option value="1" >垂直</option>'
                    }
                    
                    
                    fontStr = fontStr+'</select>&nbsp;&nbsp;<span class="link-number-text">順時針旋轉角度</span>&nbsp;:&nbsp;&nbsp;'
                    +'<input type="text" class="dfinput" id="angle" name="angle" style="width:80px;" value="'+angle+'"  />';
                _link_conrainer_text.find("p").html(fontStr);
                $("#font_"+index+"").next("select[name='font']").val(font);//設置動態選擇字體
                        
            }else{
                _link_conrainer_text.find("p").html('');
            }
            //在圖片上添加一個矩形區域
            _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); 

效果以下：