Crop - vælg punkterne
Jeg har en ASP resize funktion på min server og skal derfor blot bruge kordinaterne på et bille for at kunne resize det.Jeg fandt nedestående kode her på experten, men syntes den viser lidt forkerte kordinater ?
Jeg kunne godt tænke mig at man kunne flytte rundt på den DIV med musen - en venlig sjæl som har tid til at hjælpe ?
-------- KODE ---------
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type="text/javascript">
var startPos = {x:0,y:0}
var endPos = {x:0,y:0}
var cropElmId = "cropDiv";
var cropActive = false;
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
function startCrop(e,elmId) {
e = (!e) ? event : e;
startPos.x = endPos.x = (typeof e.clientX == "number") ? e.clientX : e.pageX;
startPos.y = endPos.y = (typeof e.clientY == "number") ? e.clientY : e.pageY;
placeCropElm();
cropActive = true;
writePosition(elmId);
}
function moveCrop(e,elmId) {
if (cropActive) {
e = (!e) ? event : e;
endPos.x = (typeof e.clientX == "number") ? e.clientX : e.pageX;
endPos.y = (typeof e.clientY == "number") ? e.clientY : e.pageY;
placeCropElm();
writePosition(elmId);
}
}
function placeCropElm() {
cropElm = document.getElementById(cropElmId).style;
cropElm.left = Math.min(startPos.x,endPos.x)+"px";
cropElm.top = Math.min(startPos.y,endPos.y)+"px";
cropElm.width = Math.max(endPos.x-startPos.x,startPos.x-endPos.x)+"px";
cropElm.height = Math.max(endPos.y-startPos.y,startPos.y-endPos.y)+"px";
}
function endCrop(elmId) {
cropActive = false;
writePosition(elmId);
}
function writePosition(ID) {
frm = document.form1;
elmPos = getPos(document.getElementById(ID));
frm.x1.value = Math.min(startPos.x,endPos.x)-elmPos.x;
frm.y1.value = Math.min(startPos.y,endPos.y)-elmPos.x;
frm.x2.value = Math.max(startPos.x,endPos.x)-elmPos.y;
frm.y2.value = Math.max(startPos.y,endPos.y)-elmPos.y;
}
</script>
</head>
<body>
<div id="cropDiv" style="border:1px solid #000;background-color:#ddf;opacity:0.5;filter:alpha(opacity=50);;position:absolute;left:0px;top:0px" onclick="if (cropActive) {endCrop(this.id);} else {startCrop(event,'billede');}" onmousemove="moveCrop(event,'billede');"></div>
<img src="http://www.supercars.dk/cars/supercars/audi-s8-wallpapers.jpg" id="billede" style="width:500px;height:300px;" onclick="if (cropActive) {endCrop(this.id);} else {startCrop(event,this.id);}" onmousemove="moveCrop(event,this.id);">
<form name="form1">
x1: <input type="text" name="x1"> - y1: <input type="text" name="y1"><br>
x2: <input type="text" name="x2"> - y2: <input type="text" name="y2">
</form>
</body>
</html>
