Getting mouse position relative to containing div?

[zq29]

As part of a project, I need the user to be able to place a 'marker' on top of an image, and to do this I need to location of the mouse relative to the top left of the image (contained within a div). My current solution gets the mouse position relative to the page and then offsetting it agains the position of the image div - As you are probably aware, this is not ideal for several reasons. I'd class myself as somewhat of a novice at JavaScript as I don't really use it on a daily basis. Any help with this would be appreciated. My current function:
[code]function getcoords(id,tgt) {
    var posX = 0;
    var posY = 0;
    var exit = 0;

    document.getElementById(tgt).onmousemove = getMouseXY;
    document.getElementById(tgt).onclick = storeMouseXY;

    function getMouseXY(e) {
        if(exit == 0) {
            if(navigator.appName == "Netscape"){
                posX = e.pageX;
                posY = e.pageY;
            } else {
                posX = event.clientX + document.body.scrollLeft;
                posY = event.clientY + document.body.scrollTop;
            }
            if (posX <= 0) {posX = 0;}
            if (posY <= 0) {posY = 0;}
            var pos = (posX - 494)+","+(posY - 157);
            document.getElementById(id).value = pos;
        }
    }

    function storeMouseXY() {
        var pos = (posX - 494)+","+(posY - 157);
        document.getElementById(id).value = pos;
        exit = 1;
    }
}[/code]

[AndyB]

What I know about javascript could be written on the head of a pin!

Not sure if this is relevant, but if the image were a clickable form 'submit' button, then the post/get array would contain the x and y co-ordinates relative to the upper left of the image as submit_x/submit_y

[zq29]

Thats quite an interesting way of going about it! Thanks for that AndyB, I might just go ahead with that idea until anyone pops up with a better way / reason why thats not as good of an idea as I first thought!

[nogray]

what you need is offsetX and offsetY (you can read more about it in http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/offsetx.asp)

but since firefox doesn't support it, you'll need to add a few function to emulate the results.

I did this after some research for a drag and drop library, and the function were from http://davidlevitt.com/2006/04/04/how-to-implement-offsetx-and-offsety-in-firefox.aspx

for IE and Opera, you can use
[code]
if (is_IE) e = event;
X = e.offsetX;
Y = e.offsetY;
[/code]

for firefox
[code]
X = window.pageXOffset + e.clientX - GetLocation(__getNonTextNode(e.explicitOriginalTarget)).x;
Y = window.pageYOffset + e.clientY - GetLocation(__getNonTextNode(e.explicitOriginalTarget)).y;

function __getNonTextNode(node) {
    try {
        while (node && node.nodeType != 1) {
            node = node.parentNode;
        }
    }
    catch (ex) {
        node = null;
    }
    return node;
}



function GetLocation(el) {
      var c = { x : 0, y : 0 };
      while (el) {
            c.x += el.offsetLeft;
            c.y += el.offsetTop;
            el = el.offsetParent;
      }
      return c;

}
[/code]

[zq29]

Thanks nogray, works perfectly. I don't fully understand how it works due to my less than perfect understanding of JavaScript as a whole, but I can figure out most of it. Thanks again for your input guys!