Javascipt: Get mouse position relative to parent element

Question

Is there any way to get mouse position relative to it's parent element?

Let's say I have a structure:

<div id="parent">
    <span class="dot"></span>
</div>

When I bring my mouse over span element I need to get its position relative to its parent element (<div id="parent">). PageX/ClientX give me position relative to page/client area, so it's not working for me.

Any suggestions are greatly appreciated.

Thank you.

Answer 1

Subtract the position of the parent element (offsetLeft; offsetTop) from the mouse position (pageX; pageY) to get relative position. Remember to take offsetParent into account if you have multiple levels of offsets.

Answer 2

Try the offsetParent property. http://help.dottoro.com/ljetdvkl.php

Try this: positionX = document.getElementByID('childId').offsetParent.offsetLeft; positionY = document.getElementByID('childId').offsetParent.offsetLeft;