Home > Programming > How to calculate relative cordinates of mouse pointer within web element

How to calculate relative cordinates of mouse pointer within web element

There are some difficulties to get mouse pointer coordinates within  web object by Javascript. We have to solve web browser differences and figure out complicated DOM hierarchy.

If you use jQuery (this is most popular Javascript library in recent days), things get easier.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('img#test').click(function(e){
    var x = e.pageX - $('img#test').position().left;
    var y = e.pageY - $('img#test').position().top;
    alert("X=" + x + " Y=" + y);
  });
});
</script>

Then you just need start image tag like <img id="test".

Categories: Programming Tags:
  1. No comments yet.
  1. No trackbacks yet.