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

现在整理下发出来，希望大家共同学习吧
先看效果图：

用了jquery.image-maps.js这个插件 下载地址 //www.jb51.net/jiaoben/57930.html
原理是：
通过拖动计算出当前热区可移动模块的left top right bottom
对应area的 coords 属性集成上面的位置，就可以实现热区了。
对应的模块代码是：

<!–模块展示 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—>

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 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(),