Jump to content

Getting mouse position relative to containing div?


zq29

Recommended Posts

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]
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.