<IMG SRC="blank.gif"
        NAME="holdspace" ID="holdspace"
        WIDTH="350" HEIGHT="90"
        STYLE="visibility:hidden; position:relative;">

We then compute the coordinates of this GIF. We use the IMG's ID to find it in the images[] array:

var holdingImage = document.images["holdspace"];
var canvasLeft = (NS4) ? holdingImage.x : holdingImage.getRealLeft();
var canvasTop = (NS4) ? holdingImage.y : holdingImage.getRealTop();
var canvasWidth = holdingImage.width;
var canvasHeight = holdingImage.height;

where getRealLeft() and getRealTop() are defined as in Scrolling JavaScript Banners:

function getRealLeft() {
	xPos = this.offsetLeft;
	tempEl = this.offsetParent;
  	while (tempEl != null) {
  		xPos += tempEl.offsetLeft;
  		tempEl = tempEl.offsetParent;
  	}
	return xPos;
}

function getRealTop() {
	yPos = this.offsetTop;
	tempEl = this.offsetParent;
	while (tempEl != null) {
  		yPos += tempEl.offsetTop;
  		tempEl = tempEl.offsetParent;
  	}
	return yPos;
}

These functions are needed for Internet Explorer in cases where the IMG tag is positioned inside another container such as a table. See Column 13 for more details on the motivation.

Once the coordinates and size of the image are known, the DIV element is assigned with the new numbers.

Learn more about DHTML positioning in Column 32, Scrolling HTML Basics, Part III: The Cross-Browser Version.

People who read this tip also read these tips:

• Avoiding Hard-Coded Numbers in XSLT
• Defining the Grammar of Element Attributes
• Adding A Tag to An XML Tree
• Linking Code Behind to the IsPrime Web Service Consumer
• Matching a Response to its Request