Indsætte punkter på img og gemme i db
Jeg er kørt fast i en opgave og vil høre om nogen kan hjælpe mig med at få den løst, opgaven består i at gemme nogle punkter som er sat på et img med javascript som du kan se i koden herunder.Jeg vil gerne have 2 php filer som kan følgende:
opret_kordianter_paa_image.php
// Sæt punkter på image som den kode sidst i denne meddelelse
// Gemme image navn og kordianter i DB som følger:
Tabel: img_kordianter
id,
manual_id
img_navn,
punkt_nr
kordinat_x
kordinat_y
hjelpe_txt
(fil nr. 2)
rediger_kordianter_paa_image.php
// Hente img og sætte punkterne på kordinater fra DB
// Redigere punkternes plassering (som ved opret)
// Gemme ændringerne igen i samme db
**** Her kommer så den koder jeg p.t har og som jeg sætter punkterne med:
<!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>Kordinater</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("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("Der er ikke flere punkter!");
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;
}
// Tester nykode
function grabPointsto()
{
var output2 = document.getElementById("output2");
output2.value = "";
arrPoints.sort(sortPoints);
for(var i = 0; i < arrPoints.length; i++)
{
var strPointData = pointToString2(document.getElementById(arrPoints[i]));
if(i != 0)
output2.value += "\n";
output2.value += strPointData;
}
}
function pointToString2(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;
}
// Tester slut
//------------- 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>Klik på billedet for at tilføje et punkt</td>
</tr>
<tr>
<td>
Her var den
</td>
</tr>
<tr>
<td>
<textarea id="output" name="txtar" cols="4" rows="6" style="width: 500px;" readonly ></textarea>
</td>
</tr>
<tr>
<td>Link her</td>
</tr>
<tr>
<td>Klik på billedet for at tilføje et punkt</td>
</tr>
<tr>
<td>
<img id="pic" src="maps/outlook_e_mail.jpg" onclick="mouseclick(event, this);" alt="" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Vis alle kordinater og hjælpe tekst" onclick="grabPoints();" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Gem alle kordinater og hjælpe tekst i databasen" />
</td>
</tr>
</table>
<div id="positionNode" style="position: absolute; width: 150px; display:none;" >
<img id="dot" width="20" height="20" src="" alt="Klik for at redigere punkt" 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="Gem" /></td>
<td style="width: 99%;"><input id="btnRemove" type="button" value="Fjern"/></td>
</tr>
</table>
</td>
<td><div id="xyCoords" style="display: none;"> </div></td>
</tr>
</table>
</div>
<div id="container"></div>
</body>
</html>
