Someone

<html>

<head><title></title>

<script language=javascript type='text/javascript'>

function draw_rectangle(w,h,x,y)
{
	var bg = "";
	var bCol = "red";

	var rect = document.createElement("div");
	var style = rect.style;
	style.width = w +"px";
	style.height = h +"px";
	style.left = x +"px";
	style.top = y +"px";
	style.backgroundColor = bg;
	style.borderColor = bCol;
	// fixed
	style.position = "absolute";
	style.borderStyle = "solid"
	style.borderWidth = 2;
	return rect
}


function load_image()
{
	document.getElementById('image_div').innerHTML = "<img style='position: absolute; left: 10px; top: 50px' border='0' src='" + document.getElementById('image_file').value + "'>";
}


function mouseX(evt)
{
	if (evt.pageX)
		return evt.pageX;
	else if (evt.clientX)
   		return evt.clientX + (document.documentElement.scrollLeft ?
   			document.documentElement.scrollLeft :
   				document.body.scrollLeft);
	else
		return null;
}

function mouseY(evt)
{
	if (evt.pageY)
		return evt.pageY;
	else if (evt.clientY)
   		return evt.clientY + (document.documentElement.scrollTop ?
   			document.documentElement.scrollTop :
   				document.body.scrollTop);
	else
		return null;
}


function process_click(x, y)
{
	if (document.getElementById('x1').value == '' && document.getElementById('y1').value == '')
	{
		document.getElementById('x1').value = x;
		document.getElementById('y1').value = y;
	}
	else
	{

		document.getElementById('x2').value = x;
		document.getElementById('y2').value = y;


		if (document.getElementById('x1').value > document.getElementById('x2').value)
		{
			var temp_x1 = document.getElementById('x1').value;
			document.getElementById('x1').value = document.getElementById('x2').value;
			document.getElementById('x2').value = temp_x1;
		}

		if (document.getElementById('y1').value > document.getElementById('y2').value)
		{
			var temp_y1 = document.getElementById('y1').value;
			document.getElementById('y1').value = document.getElementById('y2').value;
			document.getElementById('y2').value = temp_y1;
		}



		var width = parseInt(document.getElementById('x2').value) - parseInt(document.getElementById('x1').value);
		var height = parseInt(document.getElementById('y2').value) - parseInt(document.getElementById('y1').value);




		if (height < 0)
		{
			height *= -1;
		}

		if (width < 0)
		{
			width *= -1;
		}

		alert(height);
		alert(width);
		
		

		document.getElementById('image_div').appendChild(draw_rectangle(width,height,parseInt(document.getElementById('x1').value),parseInt(document.getElementById('y1').value)));

		document.getElementById('x1').value = '';
		document.getElementById('y1').value = '';
		document.getElementById('x2').value = '';
		document.getElementById('y2').value = '';

	}

}

</script>


</head>

<body>

<input type=file name='image_file' onChange="load_image();">

<input type=text name='x1'>
<input type=text name='y1'>
<input type=text name='x2'>
<input type=text name='y2'> 10px, 50px



<div id="image_div" onClick='javascript: process_click(mouseX(event), mouseY(event));'>

</div>



</body>

</html>