<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试图片标记</title> <mce:style type="text/css"><!-- #container{ position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden; } #map{ position:absolute; } .mark{ position:absolute; width:6px; height:6px; font-size:0px; background:#FF0000; } --></mce:style><style type="text/css" mce_bogus="1">#container{ position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden; } #map{ position:absolute; } .mark{ position:absolute; width:6px; height:6px; font-size:0px; background:#FF0000; }</style> <mce:script type="text/javascript"><!-- var mark = []; function setCookie(name,value) { var Days = 365; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); if(arr != null) return unescape(arr[2]); return null; } function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } function $(id){ return document.getElementById(id); } function point(x, y){ this.x = x; this.y = y; } function getOffset(obj){ var x = 0, y = 0; while(obj){ x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; } return {x : x, y : y }; } function addMark(p, x, y, index){ var div = document.createElement("div"); div.id = "mark" + index; div.className = "mark"; div.style.left = x + "px"; div.style.top = y + "px"; p.appendChild(div); } function bindEvent(){ $("map").ondblclick = function(oEvent){ oEvent = oEvent || event; var container = $("container"); var offset = getOffset(container); var x = oEvent.clientX - offset.x; var y = oEvent.clientY - offset.y; addMark(container, x, y, mark.length); mark.push(x + "," + y); saveMark(); }; } function saveMark(){ setCookie("mark", mark.join("|")); } function loadMark(){ var cookie = getCookie("mark"); if(cookie){ mark = cookie.split("|"); var container = $("container"); for(var i=0; i<mark.length; i++){ addMark(container, mark[i].split(",")[0], mark[i].split(",")[1], i); } } } function clearMark(){ var container = $("container"); for(var i=0; i<mark.length; i++){ container.removeChild($("mark"+i)); } mark.length = 0; saveMark(); } window.onload = function(){ bindEvent(); loadMark(); }; // --></mce:script> </head> <body> <div id="container"> <div id="map"> <img src="http://www.0755-0755.com/map/map/1.jpg" mce_src="http://www.0755-0755.com/map/map/1.jpg" /> </div> </div> <br /> <input type="button" value="清除标记" οnclick="clearMark()"/> </body> </html> 其中,标记点暂存在cookie里,需要保存数据库的另作修改。