Get Image coordinates in Asp.Net

Description:-

In this article we will see about image coordinates. You can get image co-ordinates using the position of you mouse pointer. To read it you have to get the x and y value on your mouse pointer and you can after get the co-ordinates of image. In actual format formats is nothing but the mouse pointer position to read it you have to X and Y value from you page. So you can directly read it.

Default.aspx:-

<form name="pointform" method="post">
<div style="position: absolute; left: 20px; top: 20px;"> Get Image coordinates</div>
<div style="clear: both; height: 5px;"> </div>
<div id="pointer_div" onclick="point_it(event)" style="background-image: url('water.png');
background-repeat: no-repeat; width: 900px; height: 262px;">
</div>
<div style="position: absolute; left: 20px; top: 280px;"> You pointed on x =
  <input type="text" name="form_x" size="4"/>- y =
  <input type="text" name="form_y" size="4"/>
</div>
</form>

JavaScript Code:-

<script language="JavaScript"type="text/javascript">
function point_it(event) {
  pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
  pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
  document.pointform.form_x.value = pos_x;
  document.pointform.form_y.value = pos_y;
}
</script>

Now you can run your application and get X and Y Co-ordinates of your Image.

Author : Umesh Patel

Related Posts