Jep, den sidste jeg lægger med er denne:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
html,body{margin:0px;padding:0px;}
#cont{position:relative;margin:200px auto 0px auto;width:500px;}
</style>
<script type="text/javascript">
var startPos = {x:0,y:0}
var endPos = {x:0,y:0}
var cropElmId = "cropDiv";
var cropActive = false;
var offl=offt=0;
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) {
offl=offt=0;
tn=document.getElementById("billede");if(tn.offsetLeft)offl+=tn.offsetLeft;if(tn.offsetTop)offl+=tn.offsetTop;
for(;tn=tn.parentNode;){if(tn.offsetLeft)offl+=tn.offsetLeft;if(tn.offsetTop)offt+=tn.offsetTop;}
e = (!e) ? event : e;
startPos.x = endPos.x = (typeof e.clientX == "number") ? e.clientX-offl : e.pageX-offl;
startPos.y = endPos.y = (typeof e.clientY == "number") ? e.clientY-offt : e.pageY-offt;
placeCropElm('new');
cropActive = true;
}
function moveCrop(e,elmId) {
if (cropActive) {
e = (!e) ? event : e;
endPos.x = (typeof e.clientX == "number") ? e.clientX-offl : e.pageX-offl;
endPos.y = (typeof e.clientY == "number") ? e.clientY-offt : e.pageY-offt;
placeCropElm();
}
}
function placeCropElm(t) {
frm = document.form1;
elmPos = getPos(document.getElementById(cropElmId));
cropElm = document.getElementById(cropElmId).style;
cropElm.left = Math.min(startPos.x,endPos.x)+"px";
cropElm.top = Math.min(startPos.y,endPos.y)+"px";
o=document.getElementById('billede');
tmpx=Math.max(endPos.x-startPos.x,startPos.x-endPos.x);
tmpy=Math.max(endPos.y-startPos.y,startPos.y-endPos.y);
if(endPos.y>startPos.y){
frm.y1.value=startPos.y;
cropElm.top=frm.y1.value+"px";
tmp=(false)?o.offsetHeight:Math.max(tmpy,tmpx);
frm.y2.value=tmp;
cropElm.height=tmp+"px";
}
if(endPos.x>startPos.x){
frm.x1.value = startPos.x;
cropElm.left = frm.x1.value+"px";
frm.x2.value=Math.max(tmpy,tmpx);
cropElm.width = frm.x2.value+"px";
}
if(endPos.x<startPos.x){
frm.x1.value = startPos.x-Math.max(tmpy,tmpx);
cropElm.left = frm.x1.value+ "px";
frm.x2.value = Math.max(tmpy,tmpx);
cropElm.width = frm.x2.value+"px";
}
if(endPos.y<startPos.y){
frm.y1.value = startPos.y-Math.max(tmpy,tmpx);
cropElm.top = frm.y1.value+"px";
frm.y2.value = Math.max(tmpy,tmpx);
cropElm.height = frm.y2.value+"px";
}
if(t=='new'){
cropElm.width = "0px";
cropElm.height = "0px";
}
}
function endCrop(elmId) {
cropActive = false;
}
</script>
</head>
<body><br><br><br><br><div id="cont">
<div style="position:relative;">
<div id="cropDiv" style="border:1px solid #000;background-color:#ddf;opacity:0.5;filter:alpha(opacity=50);overflow:hidden;position:absolute;left:0px;top:0px" onmousemove="moveCrop(event,'billede');" onclick="if (cropActive) {endCrop('billede');} else {startCrop(event,'billede');}" ></div>
<img src="billede.png" id="billede" style="width:200px;height:300px;" onclick="if (cropActive) {endCrop(this.id);} else {startCrop(event,this.id);}" onmousemove="moveCrop(event,this.id);">
</div>
<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>
</div></body></html>
... [ Nu tog jeg lige denne version. Der er fejl i den, i og med det område man vil skære ud, det kan ryge ud over billedes kanter. ] ... Det er ikke en fejl jeg har lavet - den er i den oprindelige:
tryk knappen ned - og kør ligeså stille ned mod nederste højre hjørne ... der er ingen validering på om den når ud over...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</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="billede.png" id="billede" style="width:200px;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>
... dertil opdagede jeg følgende ... den tager ikke hensyn til om man scroller - det skal også implementeres og den tager heller ikke hensyn til en relativ placering ... og returnerer heller ikke positionerne korrekt i forhold til billedet ... (nedenstående er oprindelig script - rykket lidt ned og centreret i en relativ placeret div)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</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>
scroll ned...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin:0px auto;width:500px;position:relative;">
<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="billede.png" id="billede" style="width:200px;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">
</div>
</form>
</body>
</html>
... Jeg troede umiddelbart at den virkede og at det bare var krydsning på kvadrat boxen der manglede ... jeg tog desværre fejl (gid jeg havde set de ting inden :D )
... jeg har lige et par pakker der skal pakkes og skal nok lidt tidligere i seng idag og når derfor ikke at kigge på alle rettelserne (samt det at det måske ville være bedre at få noget bygget op fra bunden - jeg roder sådan når jeg retter)
... kaster lige et alternativt link som du måske kan kigge lidt på (mener at jeg har været med til at pille ved en lignende tidligere) ...
