Detecting the x and y coordinates of an image is simple in Netscape Navigator, as it provides the x and y as the image object's properties:
function docjslib_getImageXfromLeft(imgID) {
if (NS4) return eval(imgID).x
else return docjslib_getRealLeft(imgID);
}
function docjslib_getImageYfromTop(imgID) {
if (NS4) return eval(imgID).y
else return docjslib_getRealTop(imgID);
}
Notice that in Internet Explorer we resort to using our own functions, getRealLeft() and getRealTop(). The reason being that Internet Explorer does not provide us with the equivalents to x and y properties in Netscape Navigator. The trick is to use the offset family of properties. The offsetParent returns the parent of the current element. The offsetLeft and offsetTop properties show the x and y coordinates of the element with respect to its parent. Computing the absolute x and y coordinates of an image is established by iterating recursively over the element's parent until no more parents are available:
function docjslib_getRealLeft(imgElem) {
xPos = eval(imgElem).offsetLeft;
tempEl = eval(imgElem).offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
function docjslib_getRealTop(imgElem) {
yPos = eval(imgElem).offsetTop;
tempEl = eval(imgElem).offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
One of the common situations where using these functions is a must, is when placing an image inside a <TABLE> tag. The image's offsetLeft and offsetTop properties denote its distance from the array's top left corner. We need to add the array's offsetLeft and offsetTop , respectively, to get the x and y coordinates of the image with respect to the page's top left corner.
Learn more about DOCJSLIB 4.0 in Column 33, DOCJSLIB Version 4.0: Scrollers, Watermarks, and Games .
People who read this tip also read these tips:
Look for similar tips by subject:
| 
