Thursday, 7 February 2013

Find Coordinates of Image Using Javascript


Find Coordinates of Image Using Javascript


Today I came across this problem via a Post in ASP.Net Forums.. Well I found a solution to this by a Code Snippet by Rion Williams. I try to reproduce the same on my system and Voila It Worked!!

So I am sharing the same code with you.. Hope It helps someone:


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Find Coordinates</title>

   

 <script type='text/javascript'>

  function getMouseXY(e) {

      document.getElementById('x').value = e.pageX || event.clientX ;

      document.getElementById('y').value = e.pageY || event.clientY;

      return true;

  }

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

      <img src="new.jpg" onmousemove='return  getMouseXY(event);' />

  <hr />

  X:

  <input id='x' />

  Y:

  <input id='y' />

    </div>

    </form>

</body>

</html>


Note : Here new.jpg is the image i am using in my project.. You can change the source according to the image you are using..

Demo:


No comments:

Post a Comment

Thank You for Your Comments. We will get back to you soon.

back to top