Trying to find image position in IE.

Discussion in 'Javascript' started by Paul, Jul 15, 2008.

  1. Paul

    Paul Guest

    Hi,

    I'm trying to find the left and top position of an image in MSIE. In
    HTML the image is

    <img border=0 src="image.png" id="myimage" style="position:relative;" /
    >


    The javascript is

    ///////
    var myvar;
    var xpos;
    document.onmousemove = getCoordinate;
    function getCoordinate(e) {
    myvar = document.getElementById('myimage');
    xpos = myvar.style.left;
    displayvar(xpos); // function to display a value
    }
    ///////

    The myvar.style.left is empty. Also I've tried

    xpos = myvar.style.pixelLeft

    which is always set to zero regardless of the images left position.

    Any ideas how to read the x,y position of an image? The above works if
    the html style tag in the img tag is

    style="position:relative; left:400px"

    So the javascript reads the left position as 400, but I don't want to
    manually fix the position of the image.


    Any help is greatly appreciated.
    Paul
    Paul, Jul 15, 2008
    #1
    1. Advertising

  2. Joost Diepenmaat, Jul 15, 2008
    #2
    1. Advertising

  3. Paul

    Paul Guest

    On Jul 15, 7:49 am, Joost Diepenmaat <> wrote:
    > Paul <> writes:
    > > Any ideas how to read the x,y position of an image?

    >
    > Take a look at the "offset" section of this page:
    >
    > http://www.quirksmode.org/dom/getstyles.html
    >
    > --
    > Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/



    That worked. Thanks, you're a life saver! The new code is

    xpos = myvar.offsetLeft

    I guess it's not part of the "style" since it is not xpos =
    myvar.style.offsetLeft. Also note that if the image is inside say a
    "div" then the offsetLeft is *relative* to the div, so in that case
    one would read the offsetLeft of the "div."

    Regards,
    Paul
    Paul, Jul 15, 2008
    #3
  4. Paul

    Paul Guest

    On Jul 15, 9:21 am, Paul <> wrote:
    > On Jul 15, 7:49 am, Joost Diepenmaat <> wrote:
    >
    > > Paul <> writes:
    > > > Any ideas how to read the x,y position of an image?

    >
    > > Take a look at the "offset" section of this page:

    >
    > >http://www.quirksmode.org/dom/getstyles.html

    >
    > > --
    > > Joost Diepenmaat | blog:http://joost.zeekat.nl/|work:http://zeekat.nl/

    >
    > That worked. Thanks, you're a life saver! The new code is
    >
    > xpos = myvar.offsetLeft
    >
    > I guess it's not part of the "style" since it is not xpos =
    > myvar.style.offsetLeft. Also note that if the image is inside say a
    > "div" then the offsetLeft is *relative* to the div, so in that case
    > one would read the offsetLeft of the "div."
    >
    > Regards,
    > Paul



    Here's some that will find the left position of an image regardless,
    at least on MSIE7, not sure about other browser. Again it uses
    offsetLeft, but it drills down to each parent summing up the offsets.

    myObj = document.getElementById('myImgID');
    ImgXPos = calcLeftPosition(bla1);
    function calcLeftPosition(obj) {
    var curleft = 0;
    if(obj.offsetParent) {
    while(1) {
    curleft+=obj.offsetLeft;
    if(!obj.offsetParent) {
    break;
    }
    obj=obj.offsetParent;
    }
    } else if(obj.x) {
    curleft+=obj.x;
    }
    return curleft
    }


    And for the top position,

    function calcTopPosition(obj){
    var curtop = 0;
    if (obj.offsetParent) {
    while (1) {
    curtop+=obj.offsetTop;
    if (!obj.offsetParent) {
    break;
    }
    obj=obj.offsetParent;
    }
    } else if (obj.y) {
    curtop+=obj.y;
    }
    return curtop;
    }

    Regards,
    Paul
    Paul, Jul 15, 2008
    #4
  5. Paul meinte:

    > Here's some that will find the left position of an image regardless,
    > at least on MSIE7, not sure about other browser. Again it uses
    > offsetLeft, but it drills down to each parent summing up the offsets.


    [snip]

    It works in all(?) current browsers, too. However it's a bit clumsy:

    function getAbsPos(elem) {
    var pos = {x: 0, y: 0};
    while((elem = elem.offsetParent)) {
    pos.x += elem.offsetLeft;
    pos.y += elem.offsetTop;
    }
    return pos;
    }

    does both coordinates with half the LOC.

    scrollTop and scrollLeft of containers might be an issue though.

    Gregor

    --
    http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
    http://web.gregorkofler.com ::: meine JS-Spielwiese
    http://www.image2d.com ::: Bildagentur für den alpinen Raum
    Gregor Kofler, Jul 15, 2008
    #5
  6. Paul

    Paul Guest

    On Jul 15, 10:11 am, Gregor Kofler <> wrote:
    > Paul meinte:
    >
    > > Here's some that will find the left position of an image regardless,
    > > at least on MSIE7, not sure about other browser. Again it uses
    > > offsetLeft, but it drills down to each parent summing up the offsets.

    >
    > [snip]
    >
    > It works in all(?) current browsers, too. However it's a bit clumsy:
    >
    > function getAbsPos(elem) {
    > var pos = {x: 0, y: 0};
    > while((elem = elem.offsetParent)) {
    > pos.x += elem.offsetLeft;
    > pos.y += elem.offsetTop;
    > }
    > return pos;
    >
    > }
    >
    > does both coordinates with half the LOC.
    >
    > scrollTop and scrollLeft of containers might be an issue though.
    >
    > Gregor




    Thanks. You're correct, that code was very sloppy. I merely grabbed
    the code from a forum and added the tabbed indenting.

    Although there's one thing missing in the code.

    Instead of,

    var pos = {x: 0, y: 0};

    it should be,

    var pos = {x: elem.offsetLeft, y: elem.offsetTop};

    Otherwise it will miss one element.

    Regards,
    Paul
    Paul, Jul 15, 2008
    #6
  7. Paul meinte:

    [snip]

    > Although there's one thing missing in the code.
    >
    > Instead of,
    >
    > var pos = {x: 0, y: 0};
    >
    > it should be,
    >
    > var pos = {x: elem.offsetLeft, y: elem.offsetTop};


    You're right, my bad. It was sloppy cut and paste from my library, where
    it is

    var pos = new Coord(elem.offsetLeft, elem.offsetTop);

    Gregor


    --
    http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
    http://web.gregorkofler.com ::: meine JS-Spielwiese
    http://www.image2d.com ::: Bildagentur für den alpinen Raum
    Gregor Kofler, Jul 15, 2008
    #7
  8. Paul

    dhtml Guest

    On Jul 15, 11:00 am, Paul <> wrote:
    > On Jul 15, 10:11 am, Gregor Kofler <> wrote:


    >
    > Although there's one thing missing in the code.


    What about the border-widths of the offsetParents?

    What are offsetTop and offsetParent?

    > Regards,
    > Paul
    dhtml, Jul 16, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    649
    Luqman
    Feb 7, 2006
  2. Wybo Dekker
    Replies:
    1
    Views:
    341
    Yukihiro Matsumoto
    Nov 15, 2005
  3. vdvorkin
    Replies:
    0
    Views:
    389
    vdvorkin
    Feb 10, 2011
  4. vdvorkin
    Replies:
    3
    Views:
    799
    vdvorkin
    Feb 14, 2011
  5. Replies:
    3
    Views:
    175
Loading...

Share This Page