Introducing DOCJSLIB, Part I: The makeImage Function - Doc JavaScript

The makeImage Function

The makeImage() function is the heart of DOCJSLIB. You'll be able to fully utilize it if you understand the inner workings of its implementation. Here's the whole function:

function makeImage(imgID,          // given id
                   imgURL,         // image URL
                   imgHeight,      // image height
                   imgWidth,       // image width
                   imgAlt,         // alternative image
                   posFromLeft,    // absolute position from left of window
                   posFromTop,     // absolute position from top of window
                   clickParam1,    // parameter passed to "onclick" handler
                   clickParam2)    // parameter passed to "onclick" handler
  {
  document.write(
    '<STYLE TYPE="text/css">',
    '#', imgID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, ';',
      'top: ', posFromTop, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', imgID, '">',
    '<A HREF="javascript:', "handleImageClick('", imgID, "'", ',',
     clickParam1, ',', clickParam2, ')">',
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
    '<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL, '" ALT="',
    imgAlt, '" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="',
    imgWidth, '">',
  // (The above three lines should be joined as one line.
  // They have been split for formatting purposes.)
    '</A></DIV>'
  );
}

We have already explained earlier in this column the interface part. The body of the function is a JavaScript write statement that assembles the DHTML element. First is the STYLE definition. We label the style definition with the imgID appended to a "#" character. The STYLE tag defines the positioning algorithm of the DHTML element (absolute), its position from the left edge of the window (posFromLeft), its position from the top edge of the window (posFromTop), its width (imgWidth), and its z-index (1). More attributes will be added in future versions.

The next line is the opening DIV tag, <DIV ID="', imgID, '">. The only attribute needed here is the DIV tag's ID, set to the first parameter passed to the function. The second line is the A tag definition:

'<A HREF="javascript:', "handleImageClick('", imgID, "'", ',', clickParam1,
  ',', clickParam2, ')">'
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

The A tag's HREF attribute points to a JavaScript function called handleImageClick. As explained in a previous page, you have to provide this function in your application. Its parameters are the image's ID, and two parameters, clickParam1 and clickParam2, which were passed from the ancestor makeImage() function.

The IMG tag is the last one:

'<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL, '" ALT="',
  imgAlt, '" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

The IMG tag includes a score of attributes. The most critical ones are the NAME and ID attributes. We assign a single string to both of them. The string is comprised of the DIV tag's ID concatenated with the "img" string. The rest of the parameters are fairly straightforward. They specify the image's URL (imgURL), its alternative text message (imgAlt), its border (0), its height (imgHeight), and its width (imgWidth).

The other two functions in DOCJSLIB are setSrc() and getSrc():

function getSrc(id) {
  if (NS4) {return eval("document." + id + ".document." + id + "img.src")}
  else {return eval("document.all." + id + "img.src")}
}
function setSrc(id, url) {
  if (NS4) {eval("document." + id + ".document." + id + "img").src = url
}
  else {eval("document.all." + id + "img").src = url}
}

As you can see, these functions accept the element ID and return or set its image's URL. Notice the differences in referencing the DIV tag as well as the IMG tag across platforms. The IMG element is referenced through its NAME attribute, but it is intentionally set equal to the ID attribute. As explained above, the IMG's NAME and ID attributes are equal to the DIV tag's id, concatenated with the "img" string.

Let's summarize this id "business." The DOCJSLIB's makeImage() function expects a DHTML id from its caller (as the first parameter). The caller should use this id in all other references to DOCJSLIB, including the handleImageClick() event handler (its first parameter is the DHTML id). Internally, DOCJSLIB uses this id as the DIV tag's ID and as the basis for the IMG tag's ID and NAME attributes. The "img" string is appended to the DHTML id for the IMG attributes. The following table shows the various attributes and where they are used:

Attribute	Given ID	DIV ID	IMG ID	IMG NAME
Is	"foo"	"foo"	"fooimg"	"fooimg"
Used By	Programmer	IE & NN	IE	NN

Created: October 12, 1998
Revised: October 12, 1998

URL: https://www.webreference.com/js/column27/makeimage.html