Untitled

<html>
<style>
  .tagclass {background-color:lightgrey; position:absolute;}

</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="image">
<img src="http://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif" id="tagimg"/>
</div>
<script> $('#image').on('dragstart', function(event) { event.preventDefault(); });</script>
<script>
$(document).ready(function(){
		var width = $(document).width();
		var height = $(document).height();
		var x1,x2,y1,y2 = 0;
		var tags = 0;
		$('#tagimg').mousedown(function(e) {

			x1 = e.pageX - this.offsetLeft;
			y1 = e.pageY - this.offsetTop;
			console.log("Click");
			console.log(x1);
			console.log(y1);
		});
		$('#tagimg').mouseup(function(e) {
			x2 = e.pageX - this.offsetLeft;
			y2 = e.pageY - this.offsetTop;
			console.log("Unclick");
			console.log(x2);
			console.log(y2);
			if (x1 === undefined || x2=== undefined || y1 ===undefined || y2 ===undefined)
			{
			 x1,x2,y1,y2 = 0;
			}
			if (x1!=0 && x2!=0 && y1!=0 && y2!=0)
			{
				if(x1>x2)
				{
				console.log("x is smaller");
					var x = x1;
					x1 = x2;
					x2 = x;
				}
				if(y1>y2)
				{
				console.log("y is smaller");
					var y = y1;
					y1 = y2;
					y2 = y;
				}
				tag(x1,x2,y1,y2);
			}
			x1,x2,y1,y2=0;

		});
		var tag = function(x_1,x_2,y_1,y_2)
		{


			x_2 = width - x_2;
			y_2 = height - y_2;
			console.log("#tag"+tags);

			$("#image").append("<div class='tagclass' id='tag" + tags +"'></div>");
			$("#tag"+tags).css("top",y_1);
			$("#tag"+tags).css("left",x_1);
			$("#tag"+tags).css("bottom",y_2);
			$("#tag"+tags).css("right",x_2);
			$("#tag"+tags).css("background-color","lightgrey");
			tags+=1;
		};

	});
</script>


</html>