实现思路：
1、图片容器采用relative的定位方式。
2、监控鼠标左键按下动作。并时时记录和修改轨迹层div的大小。
3、鼠标抬起后记录鼠标移动的起始位置。生成图片热点区域。
效果如下：
输入节点名称后可以生产JSON对象
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
///最终保存数据
var RequestData = {
imageGuid: "", //流程_图片id
hotspots: [
{
guid: "",
coordinate: "",//坐标点
describe: ""//锚点说明
}
]
};
var cc = function () {
return {
guid: "",
coordinate: {
x: "",
y: "",
x2: "",
y2: ""
},//坐标点
describe: ""//锚点说明
}
};
//每一个热点数据
var currentHotspots = cc();
var getGuid = function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
var InitialDiv = function (x, y) {
var div = $('<div style="background-color:#808080;opacity:0.5;"></div>');
div.css('border')
div.css('position', 'absolute');
div.css('left', x);
div.css('top', y);
currentHotspots.coordinate.x = x;
currentHotspots.coordinate.y = y;
$('body').append(div);
return div;
};
$(".csss").mousedown(function (event, dom) {
currentHotspots = cc();
var Guid = getGuid();
//记录相对应的数据。
currentHotspots.guid = Guid;
//写生成对应的层。
var div = InitialDiv(event.clientX, event.clientY);
$(".csss").mousemove(function (moveEvent, dom) {
div.css('width', moveEvent.clientX - event.clientX);
div.css('height', moveEvent.clientY - event.clientY);
currentHotspots.coordinate.x2 = moveEvent.clientX;
currentHotspots.coordinate.y2 = moveEvent.clientY;
return false;
});
});
$(".csss").mouseup(function (event, dom) {
$(".csss").unbind('mousemove');
RequestData.hotspots.push(currentHotspots);
})
$("#GetJSON").bind('click', function () {
if (currentHotspots.guid == "") {
alert('暂无区域');
return false;
}
currentHotspots.describe = $("#remarks").val();
});
$("#test").bind('click', function () {
initialPage('images/image3.jpg', RequestData);
})
$("#Seave").bind('click', function () {
});
var initialPage = function (src, RequestData) {
var dataContent = $("<div></div>");
var img = $('<img />');
img.attr('src', src);
img.attr('name', "mmm");
img.attr('usemap', '#mmm');
var map = $('<map></map>');
map.attr('name', 'mmm');
map.attr('id', 'mmm');
dataContent.append(img);
dataContent.append(map);
//生成热点点击对象
alert(JSON.stringify(RequestData));
$.each(RequestData.hotspots, function (index, dom) {
if (dom.guid == "") {
return true;
}
var area = $('<area shape="rect"/>');
area.css('cursor', 'pointer');
area.attr('coords', dom.coordinate.x + ',' + dom.coordinate.y + ',' + dom.coordinate.x2 + ',' + dom.coordinate.y2);
area.bind('click', function () {
alert("我点击热点对象" + index);
});
map.append(area)
});
$('body').append(dataContent);
}
});
</script>
</head>
<body ondrag="return false">
<div style="position:relative;border:solid 2px black; display:inline-block;">
<img class="csss" src="images/image3.jpg" />
</div>
<div style="display:inline-block;vertical-align:top;padding-left:10px;">
<p><label>节点说明：</label><input value="" style="width:200px;" id="remarks" /></p>
<p>
<input value="获取JSON" type="button" id="GetJSON" />
<input value="生成测试" type="button" id="test" />
</p>
</div>
</body>
</html>
版权声明：本文为feng65536原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。