DOCJSLIB Version 4.0: How to Get Image's Coordinates - www.docjavascript.com

Deriving An Image's Coordinates

As we sometimes place a dynamic HTML elements within an image on the page, it is important to know how to extract an image's width and height, and more importantly its coordinates with respect to the page's top left corner. Extracting the width and height of an image is uniform across Netscape Navigator and Internet Explorer:

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

Notice that these functions, as all new functions in DOCJSLIB Version 4.0, 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;
}