March 23, 2000 - Deriving an Image's Size

March 23, 2000 Deriving an Image's Size Tips: March 2000 Yehuda Shiran, Ph.D. Doc JavaScript

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

.