...

View Full Version : Finding Image Coordinates



dmittner
07-09-2002, 09:59 PM
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
07-09-2002, 10:08 PM
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
07-09-2002, 10:30 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum