Customize image hot zone Effect Based on jquery

Now let's sort it out. Hope you can learn it together.

First look:

The plug-in image-maps.js with jquery. http://www.jb51.net/jiaoben/57930.html
The principle is:
The left top right bottom of the movable module in the current hot zone is calculated by dragging.
The coords attribute of the corresponding area is integrated with the above location to implement the hot zone.
The corresponding module code is:Copy codeThe Code is as follows: <! -- Module display begin -->
<Div class = "modeShow">
<Div id = "debug"> </div>
<Div class = "imgMap mapBox">

<Map name = "Map1">
<Area shape = "rect" coords = "300,80, 500,150" href = "mall.10010.com"/>
</Map>
</Div>
</Div>
<! -- Module display end->

Js Code:Copy codeThe 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 ('<div class = "image-maps-conrainer image-maps-conrainerEdit" style = "position: relative;"> </div> 'salary .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 "> Add hotspot </a> <a href =" javascript: void (0) "class =" addImg "> upload images </a> <a class =" delSub delMode "href =" javascript: void (0) "> Delete × </a> </div> '). append ('<div class = "link-conrainer"> <ul> </ul> <div class = "clr"> </div> <div class = "clr"> </div> <span class = "numFloor"> module-1 </span> '). append ($. browser. msie? $ ('<Div class = "position-conrainer" style = "position: absolute"> </div> 'salary .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"> hotspot' + 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 "> hotspot '+ 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"> hotspot' + index + '</span>: <input type = "text" size = "60" name = "link" + index + '"class =" linkHref "value =" "/> <input type =" hidden" class = "rect-value" name = "rect '+ index +'" value = ", 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 "> hotspot '+ 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 ("Enter the link address of the Hotspot ");
Bind_map_event ();
Define_css ();
// Add a map hotspot
});
// Modify the 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 a 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 ('mouselow'). mousedown (function (event ){
Map_position_bg.data ('mouseshutdown ', true );
Map_position_bg.data ('pagex ', event. pageX );
Map_position_bg.data ('page', event. pageY );
Map_position_bg.css ('cursor ', 'Move ');
Return false;
}). Unbind ('mouseup'). mouseup (function (event ){
Map_position_bg.data ('mouseshutdown ', false );
Map_position_bg.css ('cursor ', 'default ');
Return false;
});
Conrainer. mousemove (function (event ){
If (! Map_position_bg.data ('mouseshutdown ') 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 ('page', 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 ('mouseshutdown ', 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 ('mouseshutdown '). mousedown (function (event ){
Map_position_resize.data ('mousedown', true );
Map_position_resize.data ('pagex ', event. pageX );
Map_position_resize.data ('page', event. pageY );
Return false;
}). Unbind ('mouseup'). mouseup (function (event ){
Map_position_resize.data ('mousedown ', false );
Return false;
});
// Click Cancel to drag
Conrainer. unbind ('click'). click (function (event ){
Map_position_resize.data ('mousedown ', false );
Return false;
});
Conrainer. mousemove (function (event ){
If (! Map_position_resize.data ('mouselow') 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 ('page', 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 (). find ('. link-conrainer ');
Var _ coordsMap = $ (this). parent (). next ('map ');
Var _ position_conrainer = $ (this). 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 ('hot spot '+ index );
Index ++;
});
Index = 1;
_ Position_conrainer.find ('. map-position'). each (function (){
(This).attr('ref', index).find('.link-number-text'{.html ('hot spot '+ index );
Index ++;
});
Index = 1;
_ CoordsMap. find ('area '). each (function (){
$ (This). attr ('ref ', index );
Index ++;
});
});
}
Bind_map_event ();
Function define_css (){
// Style Definition
$ 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 );

Page reference: $ ('. imgmap'). imageMaps ();