Getting x and y position of mouse pointer relative to an element.

Question

Hi can anyone help with this?
When I move the mouse pointer of a element, I would like to retrieve the x and y positions relative to the <div>

E.g - when I put the mouse pointer at the top left point of the div I would expect to get an X of 1 and a Y of 1.

This needs to be compatible for Internet Explorer

Thanks all for your time.

This works, trouble was I was calling it from the onclick event which didnt give the scrollLeft and scrollTop values. I should be able to get the position from this by using the calculations of the Divs top and left values.

function getMouseXY(ctrl)        
{
    var tempX = event.clientX + document.body.scrollLeft;
    var tempY = event.clientY + document.body.scrollTop;

    document.getElementById('<%=txtXPos.ClientID%>').value = tempX;
    document.getElementById('<%=txtXPos.ClientID%>').value = tempY;
}

Thanks to all except LincolnK ! ! lol

Answer 1

You could try something like this

function myOnMouseMove(element) {
  var e = window.event
  var relativeX = e.screenX - element.scrollLeft;
  var relativeY = e.screenY - element.scrollTop;
}