December 19, 1999 - Deriving An Image's Coordinates

December 19, 1999 Deriving An Image's Coordinates Tips: December 1999 Yehuda Shiran, Ph.D. Doc JavaScript

function docjslib_getImageWidth(imgID) {
  return eval(imgID).width;
}
function docjslib_getImageHeight(imgID) {
  return eval(imgID).height;
}

Notice that these DOCJSLIB functions expect to be called by reference. The imgID parameter should be passed by reference as oppose to a string. The best method to verify it is passed by reference is to print it to an alert box and verify that it is an object. Parameters passed by reference are actually objects. Parameters passed by string are string constants. In our scroller code, we convert the image to an object as follows:

var holdingImage = document.images["holdspace"];

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.

You can read more about our cross-browser library in Column 33, DOCJSLIB Version 4.0: Scrollers, Watermarks, and Games.