Netscape 6, Part V: DOCJSLIB 1.1: Making an Image - Doc Javascript

Netscape 6, Part V: DOCJSLIB 1.1

Making an Image

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, ')">',
    '<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="',
    imgURL, '" ALT="', imgAlt, '" BORDER="0" ', 'HEIGHT="',
    imgHeight, '" WIDTH="', imgWidth, '">', '</A></DIV>'
  );
}

Earlier in this column we explained 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 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 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

Next: How to adapt DOCJSLIB 1.0 to Netscape 6

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: January 29, 2001
Revised: January 29, 2001

URL: https://www.webreference.com/js/column76/5.html