NO, ingen fejl jeg kan jagte ?
Hele koden ser således ud:
<!DOCTYPE HTML>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen" >
body{
font-family: Arial, Helvetica, Verdana;
font-size: 9px;
}
#positionNode{
padding: 8px ;
border: 1px solid #498AC4;
background-color: #F0F9FE;
}
#contents{
width: 90%;
background-color: #F0F9FE;
border-collapse: collapse;
border: 2px solid #498AC4;
padding: 15px;
text-align: left;
font-size: 10px;
font-family: Arial, Helvetica, Verdana;
}
#poptabel{
width: 100%;
}
.redtabel{
border: 1px solid #CCC;
background-color: #F5F5F5;
padding: 8px;
}
td.redtabel {
padding: 6px;
border: 1px solid #CCC;
}
td {
display: table-cell;
vertical-align: inherit; }
</style>
<script type="text/JavaScript">
//Indsæt punkt-billederne her i kronologisk rækkefølge.
var arrDots = Array("maps/dot_1.gif", "maps/dot_2.gif", "maps/dot_3.gif", "maps/dot_4.gif");
var arrPoints = new Array();
var arrDels = new Array();
var pointId = 0;
function mouseclick(e, img)
{
if (!e) e = window.event;
var posX = 0;
var posY = 0;
var imgPos = findPos(img);
if(document.all) //IE
{
posX = e.offsetX;
posY = e.offsetY;
}
else //FireFox
{
posX = e.layerX - imgPos[0]-1;
posY = e.layerY - imgPos[1]-1;
}
placeDot(posX, posY, imgPos);
}
function placeDot(posX, posY, imgPos)
{
var elmDot = document.getElementById("positionNode").cloneNode(true);
var id = -1;
if(pointId >= arrDots.length && arrDels.length == 0)
{
alert("No more points to place!");
return;
}
if(arrDels.length == 0)
id = pointId++;
else
{
id = arrDels[arrDels.length-1];
arrDels = removeLastArrayItem(arrDels);
}
elmDot.id = elmDot.id + "|" + id;
elmDot.style.left = (imgPos[0] + posX).toString() + "px";
elmDot.style.top = (imgPos[1] + posY).toString() + "px";
//Setup events
getElement(elmDot, "btnSave").onclick = function() { savePoint(elmDot); };
getElement(elmDot, "btnRemove").onclick = function() { removePoint(elmDot); };
var imgElm = getElement(elmDot, "dot");
imgElm.onclick = function() { dotClick(elmDot); };
imgElm.src = arrDots[id];
getElement(elmDot, "xyCoords").lastChild.nodeValue = posX + "," + posY;
elmDot.style.display = "block";
document.getElementById("container").appendChild(elmDot);
}
function savePoint(div)
{
getElement(div, "contents").style.display = "none";
for(var i = 0; i < arrPoints.length; i++)
if(div.id == arrPoints[i])
return;
arrPoints[arrPoints.length] = div.id;
}
function removePoint(div)
{
var arrNew = new Array();
for(var i = 0; i < arrPoints.length; i++)
if(div.id != arrPoints[i])
arrNew[arrNew.length] = arrPoints[i];
arrPoints = arrNew;
arrDels[arrDels.length] = parseInt(div.id.split("|")[1]);
div.parentNode.removeChild(div);
}
function dotClick(div)
{
getElement(div, "contents").style.display = "block";
}
function grabPoints()
{
var output = document.getElementById("output");
output.value = "";
arrPoints.sort(sortPoints);
for(var i = 0; i < arrPoints.length; i++)
{
var strPointData = pointToString(document.getElementById(arrPoints[i]));
if(i != 0)
output.value += "\n";
output.value += strPointData;
}
}
function pointToString(div)
{
var pointNr = parseInt(div.id.split("|")[1]) + 1;
var arrPos = getElement(div, "xyCoords").lastChild.nodeValue.split(",");
var strText = getElement(div, "textInput").value;
var strReturn = pointNr + ". (" + arrPos[0] + ", " + arrPos[1] + ")" + " | " + strText;
return strReturn;
}
//------------- auxilery methods -----------------
//Returns the position of an object
function findPos(obj)
{
var curleft = curtop = 0;
if (obj.offsetParent)
{
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent)
{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft,curtop];
}
function sortPoints(a,b)
{
return(parseInt(a.split("|")[1])-parseInt(b.split("|")[1]))
}
var returnElm;
function getElement(elm, id)
{
returnElm = null;
getElm(elm, id);
return returnElm;
}
function getElm(elm, id)
{
if(elm.id == id)
returnElm = elm;
for(var i = 0; elm.childNodes[i] && returnElm == null; i++)
getElm(elm.childNodes[i], id);
}
function removeLastArrayItem(arr)
{
var arrNew = new Array();
for(var i = 0; i < arr.length-1; i++)
arrNew[arrNew.length] = arr[i];
return arrNew;
}
</script>
</head>
<body>
<table class="redtabel">
<tr>
<td>Klik på billedet for at oprette et punkt</td>
</tr>
<tr>
<td align="right">
<input type="button" value="Gem" onclick="grabPoints();" />
</td>
</tr>
<tr>
<td>
<textarea id="output" cols="4" rows="6" style="width: 500px;" ></textarea>
</td>
</tr>
<tr>
<td>
<img id="pic" src="mailskarm.jpg" onclick="mouseclick(event, this);" alt="" />
</td>
</tr>
</table>
<div id="positionNode" style="position: absolute; width: 350px; display:none;" >
<img id="dot" width="15" height="15" src="" title="Klik for at rette eller slette punkt" style="cursor: hand;" />
<table id="poptabel">
<tr>
<td>
<table id="contents" style="padding: 10px;">
<tr>
<td style="align: right;">Tekst:</td>
<td><input id="textInput" type="text" style="width: 90%;" /></td>
</tr>
<tr >
<td ></td>
<td align="right">
<table class="k">
<tr>
<td><input id="btnSave" type="button" value="Save" onclick="grabPoints();" /></td>
<td><input id="btnRemove" type="button" value="Remove"/></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td><div id="xyCoords" style="display: none;"> </div></td>
</tr>
</table>
</div>
<div id="container"></div>
</body>
</html>
