Customized image hot zone effect based on jquery_jquery

Now I have sorted it out and posted it, I hope everyone can learn from it together

Look at the renderings first: Used the jquery.image-maps.js plug-in download address http:/ /www.jb51.net/jiaoben/57930.html The principle is: Calculate the left top right bottom of the current hot zone movable module by dragging The coords attribute corresponding to the area is integrated above position, the hot zone can be realized. The corresponding module code is:

Copy code The code is as follows: js code: Copy code The code is as follows: (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(' ').css('border','1px solid #ccc'); $images.each(function(){ var _img_conrainer = $(this).parent(); _img_conrainer.append(' 添加热点 上传图片 删除× ').append(' 模块-1 ').append($.browser.msie ? $(' ').css({ background:'#fff', opacity:0 }) : ' '); 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(' 热点'+index+' : '); coords = coords.split(','); _position_conrainer.append(' 热点'+index+' X '); 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(' 热点'+index+' : '); _position_conrainer.append(' 热点'+index+' X '); var coords = _link_conrainer.find('input[name=rect' index ']').val(); _coordsMap.append(' '); $("input[name='link" index "']").val("Please enter the link corresponding to this hotspot Address"); bind_map_event(); define_css(); //Add map hot area }); //Modify link address $(".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); }); //Bind map event 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 var top = p.top dy; if (top 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; }); //Click to cancel dragging 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 var width = map_position.width() dx; if((left width) > conrainer.width()){ width = width-((left width)-conrainer.width()); } if(width 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); 页面引用：$('.imgMap').imageMaps();