Use the Jquery.image-maps.js this plugin to download the address http://www.jb51.net/jiaoben/57930.html
Drag to calculate the left top right bottom of the current hot zone removable module
The coords attribute of the area is integrated with the above position, and the hot zone can be realized.
(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" > Add hotspots </a><a href= "javascript:void (0)" class= "addimg" > Upload pictures </a><a class= "Delsub delmode" Javascript:void (0) "> Delete x</a></div> '). Append (' <div class= ' Link-conrainer ') ><ul></ul ><div class= "CLR" ></div></div><div class= "CLR" ></div><span class= "NumFloor" > Module -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" > Hot spots ' +index + ' </span>: <input type= "text" size= "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" > Hot spots ' +index + ' </span>: <input type= "text" size= "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" > 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 ("Please enter the link address for this hotspot");
Bind_map_event ();
Define_css ();
Add Map Hot Zone
});
Modify a 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 <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;
});
Click Cancel Drag
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 (' hotspot ' +index);
Index + +;
});
index = 1;
_position_conrainer.find ('. Map-position '). each (function () {
$ (this). attr (' ref ', index). Find ('. Link-number-text '). html (' hotspot ' +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 ();
