Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Finding Image Coordinates

    I'm currently working with a fairly huge image on a website which serves as a map for a game I'm developing. The image can hold hundreds of rooms in a grid-fashion and I'd like to add in a mouseover function which displays the rooms' coordinates.

    I think I'd need to do this is javascript, and I think the first step would be to be able to pin point where, on the image, the mouse is. To do that, I'd need the mouse location, adjusted by the scroll amount, compared to the top right corner of the image. The thing is, I don't know how to get the coordinates of the image I need. The image is just loaded in a normal 'img src' tag and placed in a cell of a table. I'd like to be able to get the coordinate from the image tag alone, but placing a span or div around it would work as well. Any help would be appreciated.

    Thanks,
    Dave Mittner

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Courtesy of webreference.com:
    Code:
    function getRealLeft(el) {
        xPos = el.offsetLeft;
        tempEl = el.offsetParent;
        while (tempEl != null) {
            xPos += tempEl.offsetLeft;
            tempEl = tempEl.offsetParent;
        }
        return xPos;
    }
    
    function getRealTop(el) {
        yPos = el.offsetTop;
        tempEl = el.offsetParent;
        while (tempEl != null) {
            yPos += tempEl.offsetTop;
            tempEl = tempEl.offsetParent;
        }
        return yPos;
    }
    el (passed to the functions) should be a legitimate element object reference, e.g., one returned by document.getElementById() using the image's id.

    http://www.webreference.com/dhtml/di.../realpos4.html

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right on a money... well.. not right on.. for some reason there was a 3 pixel x/y offset in my final numbers, but that's easy enough to correct.

    Thanks for the help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •