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