Jeg ved ikke umiddelbart hvor du kan finde sådan et script, så jeg har lavet et der gør nogenlunde det samme:
<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>
Har ikke haft tid til at teste det alt for godt igennem, og der mangler også lidt endnu, men du kan jo hygge dig med det så længe :-)
Ny bruger
Nybegynder
Opret
Preview
