Crop Script fra eksperten
Jeg har fundet dette script:<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:640px;height:480px;" 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>
Det virker perfekt, og er lige det jeg har ledt efter NÆSTE:) Det eneste jeg gerne vil have lavet om er sådan den er låst så man kun kan "tegne" et kvadrat. Jeg kan intet Java så er totalt lost skal bruge det i et galleriscript i PHP!
