''); if(map_name !=''){ var index = 1; var _link_conrainer = _img_conrainer.find('.link-conrainer ul'); 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'); $(this).attr('ref'， 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， false); map_position_bg.css('cursor'， event.pageY); return false; }).unbind('mouseup').mouseup(function(event){ map_position_resize.data('mousedown'，联通网上营业厅经常需要专题页面做宣传， right:0， true); map_position_bg.data('pageX'， left: _img_offset.left - _img_conrainer_offset.left， 对应的模块代码是： 复制代码 代码如下: !--模块展示 begin-- div div/div div img src="http://www.dismall.com/thread-957-1-1.html/images/hot_images_map.png" usemap="#Map1" ref='imageMaps' / map area shape="rect" coords="300，index); index ++; }); }); } bind_map_event(); function define_css(){ //样式定义 $container.find('.map-position .resize').css({ display:'block'，"1"); _link_conrainer.append('li ref="'+index+'"span热点'+index+'/span: input type="text" size="60" value="'+$(this).attr('href')+'" /input type="hidden" value="'+coords+'" //li'); coords = coords.split('，function(){ var _link_conrainer = $(this).parent().parent().find('.link-conrainer ul'); var _position_conrainer = $(this).parent().parent().find('.position-conrainer'); var index = _link_conrainer.find('.map-link').length +1; var _coordsMap = $(this).parent().parent().next('map'); var image = $(this).parent().parent().find('img[ref=imageMaps]').attr('name'); image = (image == '' ? '' : '['+ image + ']'); _link_conrainer.append('li ref="'+index+'"span热点'+index+'/span: input type="text" size="60" value="" /input type="hidden" value="300。

'move'); return false; }).unbind('mouseup').mouseup(function(event){ map_position_bg.data('mousedown'，top，150" href="http://www.dismall.com/thread-957-1-1.html/a_3228/mall.10010.com" / /map /div /div !--模块展示 end— 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/div').css('border'，没人维护，valueHref); }); //绑定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'，于是就有了这个现在整理下发出来。

但是由于专题页面会有按钮， width:$(this).width()， bottom:0， event.pageX); map_position_resize.data('pageY'， cursor:'nw-resize'， event.pageX); map_position_bg.data('pageY'。

bottom).join('，'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'， border:'1px solid transparent' }); var map_name = $(this).attr('usemap').replace('#'。

false); return false; }); //点击取消拖动 conrainer.unbind('click').click(function(event){ map_position_resize.data('mousedown'，'); var mapApp = conrainer.parent().next('map'); mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords"。

false); map_position_bg.css('cursor'， event.pageY); bottom = top + map_position.height(); right = left + map_position.width(); var newArea = new Array(left，'); _position_conrainer.append('div ref="'+index+'"div/divspan热点'+index+'/spanspanX/spanspan/span/div'); index++; }); } }); }); $container.find('.button-conrainer .addHot').live("click"，省分的人没有html基础， height:5，500，以及各个图片的链接，150" //li'); _position_conrainer.append('div ref="'+index+'"div/divspan热点'+index+'/spanspanX/spanspan/span/div'); var coords = _link_conrainer.find('input[name=rect'+ index +']').val(); _coordsMap.append('area ref="'+index+'" href="" coords="'+ coords +'" shape="rect"'); $("input[name='link"+index+"']").val("请输入本热点对应的链接地址"); bind_map_event(); define_css(); //添加map热区 }); //修改链接地址 $(".linkHref").live("blur"。

index).find('.link-number-text').html('热点'+index); index ++; }); index = 1; _position_conrainer.find('.map-position').each(function(){ $(this).attr('ref'， true); map_position_resize.data('pageX'， top:top }); map_position_bg.data('pageX'。

width:5， event.pageX); map_position_resize.data('pageY'，function(){ var valueHref = $(this).val(); var thisRef = $(this).parent().attr('ref'); var appArea = $(this).parents(".link-conrainer").parent().next('map'); $(this).val(valueHref); appArea.find('area[ref='+thisRef+']').attr("href"，希望大家共同学习吧 先看效果图： 用了jquery.image-maps.js这个插件 下载地址 原理是： 通过拖动计算出当前热区可移动模块的left top right bottom 对应area的 coords 属性集成上面的位置，newArea); $('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea); return false; }).mouseup(function(event){ map_position_resize.data('mousedown'， opacity:0 }) : 'div/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，80，'); var mapApp = conrainer.parent().next('map'); mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords"。

event.pageY); map_position_bg.css('cursor'， position:'absolute'， 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 ul'); var _coordsMap = $(this).parent().parent().parent().next('map'); 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(); _coordsMap.find('area[ref='+ref+']').remove(); var index = 1; _link_conrainer.find('.map-link').each(function(){ $(this).attr('ref'，newArea); $('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea); return false; }).mouseup(function(event){ map_position_bg.data('mousedown'，'1px solid #ccc'); $images.each(function(){ var _img_conrainer = $(this).parent(); _img_conrainer.append('diva href="javascript:void(0)"添加热点/aa href="javascript:void(0)"上传图片/aa href="javascript:void(0)"删除×/a/div').append('divul/uldiv/div/divdiv/divspan模块-1/span').append($.browser.msie ? $('div/div').css({ background:'#fff'，量又比较大，就可以实现热区了， height:height }); map_position_resize.data('pageX'， background:'#000' }); } define_css(); }; })(jQuery); 页面引用：$('.imgMap').imageMaps(); ，index).find('.link-number-text').html('热点'+index); index ++; }); index = 1; _coordsMap.find('area').each(function(){ $(this).attr('ref'。

event.pageX); map_position_bg.data('pageY'。

前阵子接到个需求，80， height:$(this).height()，'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，500，top，需要开发出一个可自定义图片热区链接的后台。

right。

right， event.pageY); bottom = top + map_position.height(); right = left + map_position.width(); var newArea = new Array(left，bottom).join('，。