Hej artico,
Så har jeg udviddet scriptet efter din beskrivelse ovenfor og rettet et par bugs (man kunne bla. ikke indsætte punkterne lige ved siden af hinanden). Så prøv det nye script nedenfor, du skal bare udvide arrDots array'et (i starten af javascriptet) efter samme struktur som jeg har gjort (der er 4 punkt-billeder i lige nu).
Der kan max indsættes det antal punkter som der er punkt-billeder i array'et. Slettes et punkt eller flere skal de genindsættes igen før der kan indsættes nye punkter.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html xmlns="
http://www.w3.org/TR/html401"> <head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
//Indsæt punkt-billederne her i kronologisk rækkefølge.
var arrDots = Array("dot_1.gif", "dot_2.gif", "dot_3.gif", "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>
<tr>
<td>Click on the picture to add a point</td>
</tr>
<tr>
<td>
<input type="button" value="Grab all point coordinates and text" 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="world-map.bmp" onclick="mouseclick(event, this);" alt="" />
</td>
</tr>
</table>
<div id="positionNode" style="position: absolute; width: 150px; display:none;" >
<img id="dot" width="15" height="15" src="" alt="Click to edit details" style="cursor: hand;" />
<table width="100%">
<tr>
<td>
<table id="contents" style="width: 90%; background-color: Silver; border: solid 1px black;" cellpadding="2" cellspacing="0">
<tr>
<td colspan="2" align="center">
<input id="textInput" type="text" style="width: 90%;" />
</td>
</tr>
<tr >
<td align="left" style="width: 1%;"><input id="btnSave" type="button" value="Save"/></td>
<td style="width: 99%;"><input id="btnRemove" type="button" value="Remove"/></td>
</tr>
</table>
</td>
<td><div id="xyCoords" style="display: none;"> </div></td>
</tr>
</table>
</div>
<div id="container"></div>
</body>
</html>
Håber det er tættere på hvad du søgte! :)
Mvh.
- Snap :)
