Minerva :: Coordinat on Image

Read 843 times | Created 2013-01-15 03:53:41 | Updated 2013-01-15 03:53:41 | | |

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
    html {
      border: none;
      overflow: auto;
    }
    body {
      margin: 0;
      padding: 0;
      font-family:verdana;
      font-size:9px;
    }
    img {
      position: absolute;
      top: 0%;
      left: 0%;
      margin:30px;
    }
    </style>
    <title>jQuery - Mouse Coordinates Over Image</title>
  </head>
  <body>
    koordinat x <input type="text" id="x" name="x" value="0" /> : y <input type="text" id="y" name="y" value="0" />
    <img src="http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/flight_2012/bp1.jpg">
    <script type="text/javascript">
    $('img').click(function(event){
      var x = event.pageX - this.offsetLeft;
      var y = event.pageY - this.offsetTop;
      alert('X: '+x+'  Y:'+y);
    });
    $('img').mousemove(function(event){
      var x = event.pageX - this.offsetLeft;
      var y = event.pageY - this.offsetTop;
      $('#x').val(x);      
      $('#y').val(y);
    });
    </script>
  </body>
</html>

Snippet Code Coordinat on Image