87,922
社区成员
发帖
与我相关
我的任务
分享
<!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>
<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;
}
</style>
<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();
};
</script>
</head>
<body>
<div id="container">
<div id="map">
<img src="http://www.0755-0755.com/map/map/1.jpg" />
</div>
</div>
<br />
<input type="button" value="清除标记" onclick="clearMark()"/>
</body>
</html>
var markid = 1;
function AddMark() {
var currentX = document.getElementById("ClientX").value;
var currentY = document.getElementById("ClientY").value;
var newMark = document.createElement("div");
newMark.innerHTML = "<div id='layer" + markid + "' style='visibility:visible;border:2px solid red;position: absolute;z-index:3;width:3px;height:3px;left:" + currentX + "px;top:" + currentY + "px;' ondblclick='javascript:alert(aa)'> </div>";
document.getElementById("flow").appendChild(newMark);
alert(newMark.innerHTML);
markid++;
}
点了以后不报错,不显示。。。