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

March 23, 2000 - Deriving an Image's Size

Yehuda Shiran March 23, 2000
Deriving 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.

Learn more about DOCJSLIB 4.0 in Column 33, DOCJSLIB Version 4.0: Scrollers, Watermarks, and Games