基于jquery自定义图片热区效果

　　<!--模块展示 begin-->

　　<div class="modeShow">

　　<div id="debug"></div>

　　<div class="imgMap mapBox">

　　<img src="../images/hot_images_map.png" name="test" border="0" usemap="#Map1" width="980" height="450" ref='imageMaps' />

　　<map name="Map1">

　　<area shape="rect" coords="300,80,500,150" href="mall.10010.com" />

　　</map>

　　</div>

　　</div>

　　<!--模块展示 end—>

　　(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 image-maps-conrainerEdit" style="position:relative;"></div>').css('border','1px solid #ccc');

　　$images.each(function(){

　　var _img_conrainer = $(this).parent();

　　_img_conrainer.append('<div class="button-conrainer"><a href="javascript:void(0)" class="addHot">添加热点</a><a href="javascript:void(0)" class="addImg">上传图片</a><a class="delSub delMode" href="javascript:void(0)">删除×</a></div>').append('<div class="link-conrainer"><ul></ul><div class="clr"></div></div><div class="clr"></div><span class="numFloor">模块-1</span>').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('#','');

　　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',"1");

　　_link_conrainer.append('<li ref="'+index+'" class="map-link"><span class="link-number-text">热点'+index+'</span>: <input type="text" size="60" name="link'+index+'" class="linkHref" value="'+$(this).attr('href')+'" /><input type="hidden" class="rect-value" name="rect'+index+'" value="'+coords+'" /></li>');

　　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">热点'+index+'</span><span class="delete">X</span><span class="resize"></span></div>');

　　index++;

　　});

　　}

　　});

　　});

　　$container.find('.button-conrainer .addHot').live("click",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+'" class="map-link"><span class="link-number-text">热点'+index+'</span>: <input type="text" size="60" name="link'+index+'" class="linkHref" value="" /><input type="hidden" class="rect-value" name="rect'+index+'" value="300,80,500,150" /></li>');

　　_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:300px;top:80px;width:200px;height:70px;"><div class="map-position-bg"></div><span class="link-number-text">热点'+index+'</span><span class="delete">X</span><span class="resize"></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",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",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', 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();

　　var newArea = new Array(left,top,right,bottom).join(',');

　　var mapApp = conrainer.parent().next('map');

　　mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords",newArea);

　　$('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea);

　　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.unbind('click').click(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();

　　var newArea = new Array(left,top,right,bottom).join(',');

　　var mapApp = conrainer.parent().next('map');

　　mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords",newArea);

　　$('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea);

　　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 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',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 ++;

　　});

　　index = 1;

　　_coordsMap.find('area').each(function(){

　　$(this).attr('ref',index);

　　index ++;

　　});

　　});

　　}

　　bind_map_event();

　　function define_css(){

　　//样式定义

　　$container.find('.map-position .resize').css({

　　display:'block',

　　position:'absolute',

　　right:0,

　　bottom:0,

　　width:5,

　　height:5,

　　cursor:'nw-resize',

　　background:'#000'

　　});

　　}

　　define_css();

　　};

　　})(jQuery);