Untitled

<html>

<head><title></title>

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


function update_mouse_pos(event)
{

	var x = parseInt(mouseX(event));// - 10;
	var y = parseInt(mouseY(event));// - 50;

	document.getElementById('y2').value = x + "," + y;




}


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 = '';
	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;
}



//returns an array where x, y, width and height are in consecutive elements (respectively)
/*function calc_rect_params(int x1, int y1, int x2, int y2)
{
	var rect_params = new Array(4);
	/*
	element:
	0 = x
	1 = y
	2 = width
	3 = height
	*/


	if (x2 > x1 &&  y2 < y1)
	{
		rect_params[0] = x1;
		rect_params[1] = y2;
		rect_params[2] = x2 - x1;
		rect_params[3] = y1 - y2;
	}
	else if (x2 < x1 && y2 < y1)
	{
		rect_params[0] = x2;
		rect_params[1] = y2;
		rect_params[2] = x1 - x2;
		rect_params[3] = y1 - y2;
	}
	else if (x2 < x1 && y2 > y1)
	{
		rect_params[0] = x2;
		rect_params[1] = y1;
		rect_params[2] = x1 - x2;
		rect_params[3] = y1 - y2;
	}
	else if (x2 > x1 && y2 < y1)
	{
		rect_params[0] = x1;
		rect_params[1] = y1;
		rect_params[2] = x2 - x1;
		rect_params[3] = y2 - y1;
	}

	return rect_params;

}


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;

		var rect_params = new Array(4);

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

		document.getElementById('image_div').appendChild(draw_rectangle(rect_params[2], rect_params[3], rect_params[0], rect_params[1]));
			*/
	}

}*/

</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));' onMouseMove = 'javascript: update_mouse_pos(event);'>

</div>


<div id="test_results" style='position: absolute; left: 800px; top: 100px'>

</div>



</body>

</html>