March 23, 2000 - Deriving an Image's Size | WebReference

# March 23, 2000 - Deriving an Image's Size

 March 23, 2000Deriving an Image's Size Tips: March 2000 Yehuda Shiran, Ph.D.Doc JavaScript
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.