cropper.html

<html>
<head>
<title> - cropper - </title>
<style type="text/css">
<!--
#pbox {
		width:300px; height:300px;
		overflow:hidden;
	}
.opacity{filter: alpha(opacity=60)}
-->
</style>
<script language="javascript" src="dom-drag.js"></script>
<script language="javascript">
	var oThang, oHandle, reportBox, iReportCount = 0;

	window.onload = function() {
		if (document.all || document.getElementById)
		{
			oThang = document.all ? document.all["thang"] : document.getElementById("thang")
			oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
			oReport = document.all ? document.all["report"] : document.getElementById("report")

			Drag.init(oHandle, oThang, -250, -50, -250, -50);

			// report stuff
			oThang.onDrag = function(x, y) { reportDrag("", x, y); }
		}

		function reportDrag(who, x, y) {
			oReport.value = who + "" + " X = " + (x + 250) + " Y = " + (y + 250) + " W = 100 H = 100"
		}

		oThang.onDrag(-250, -250);
	}
</script>
</head>

<body>

<div style="width:300px; height:300px; overflow:hidden; top:20px; left:20px;">
	<img src="snare_pic_large-300.jpg" />
	<div id="thang" style="position:absolute; left:-250px; top:-250px;">
		<img class="opacity" style="position:absolute; left:0px; top:0px;" src="selection2.gif" />
		<img id="handle" style="position:absolute; left:250px; top:250px; width:100px; height:100px;" src="x.gif" />
	</div>
</div>

<input type="text" id="report" style="width:300px;" />

</body>
</html>