Jump to content


Photo

Getting mouse position relative to containing div?


  • Please log in to reply
4 replies to this topic

#1 Kris

Kris
  • Staff Alumni
  • Advanced Member
  • 2,755 posts
  • LocationThe Internet

Posted 31 July 2006 - 03:34 PM

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:
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;
    }
}


#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 31 July 2006 - 03:40 PM

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


Legend has it that reading the manual never killed anyone.
My site

#3 Kris

Kris
  • Staff Alumni
  • Advanced Member
  • 2,755 posts
  • LocationThe Internet

Posted 31 July 2006 - 03:47 PM

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!

#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 31 July 2006 - 04:54 PM

what you need is offsetX and offsetY (you can read more about it in http://msdn.microsof...ies/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.c...in-firefox.aspx

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

for firefox
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;

}

NoGray.com


#5 Kris

Kris
  • Staff Alumni
  • Advanced Member
  • 2,755 posts
  • LocationThe Internet

Posted 07 August 2006 - 02:27 PM

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!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users