Finding Image Coordinates

[dmittner]

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

[adios]

Courtesy of webreference.com:

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/diner/realpos/realpos4.html

[dmittner]

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