Introducing DOCJSLIB 3.0, The Linked Image Model: Internal View - Doc JavaScript

The Linked Image Model: Internal View

The implementation of the Linked Image Model is given by the body of the makeLinkedImage() function:

 function docjslib_makeLinkedImage(imgID,    // given id
                   imgURL,        // image URL
                   linkURL,       // link URL
                   imgHeight,     // image height
                   imgWidth,      // image width
                   imgAlt,        // alternative image
                   posFromLeft, // absolute position from left of window
                   posFromTop,    // absolute position from top of window
                   imgVisibility, // image visibility  (true of false)
                   imgZindex)     // image Z index
  {
  var visibility = (imgVisibility) ? 'visible' : 'hidden';
  document.write(
    '<STYLE TYPE="text/css">',
    '#', imgID, ' {',
      'position: absolute;',
      'visibility: ', visibility, ';',
      'left: ', posFromLeft, ';',
      'top: ', posFromTop, ';',
      'width: ', imgWidth, ';',
      'z-index:', imgZindex,
    '}',
    '</STYLE>',
    '<DIV ID="', imgID, '">',
    '<A HREF="', linkURL, '"<',
    '<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL, '"
      ALT="', imgAlt, '" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="',
    imgWidth, '">', '</A></DIV>'
  );
}

The first line of the function's body converts DOCJSLIB's conventions for visibility (true and false) to the <STYLE> tag's syntax (visible and hidden):

var visibility = (imgVisibility) ? 'visible' : 'hidden';

The second line of the function writes the HTML statement of the DHTML element. It starts with the <STYLE> tag of the <DIV> element. The <STYLE> tag is labeled with the user's specified imgID (#imgID) and it includes the following style attributes:

• position: set to absolute. All position specifications are with respect to the window's top left corner.
• visibility: Can have one of two values: visible or hidden. Specified by the function's caller via the visibility parameter, which can have one of two values: true or false.
• left: The distance in pixels between the left edge of the DHTML element to the left edge of the window. Specified by the function's caller through the posFromLeft parameter.
• top: The distance in pixels between the top edge of the DHTML element to the top edge of the window. Specified by the function's caller via the posFromTop parameter.
• width: The element's width. Specified by the function's caller via the imgWidth parameter. Image is distorted if GIF's width is different from imgWidth.
• z-index: the Z index of the element. Specified by the function's caller via the imgZindex parameter. An element with a higher Z index will cover an element with a lower Z index.

The next line of the function specifies the DIV tag. The ID attribute is the only one specified here, and is provided by the function's caller via the imgID parameter.

The <A> tag inside the DIV tag is the vehicle by which we implement a linked image in DOCJSLIB. The HREF attribute is assigned the linkURL parameter which is specified by the function's caller.

The innermost <IMG> tag specifies the attributes of the image itself:

• NAME: The name of the image is assigned the imgID parameter, concatenated with the "img" string.
• ID: The ID of the image is assigned the imgID parameter, concatenated with the "img" string. The ID of the image is identical to its NAME.
• SRC: The URL of the image's GIF is assigned the imgURL parameter.
• ALT: The alternate textual representation is assigned the imgAlt parameter. The text is shown until the image is loaded and pops up as a tip, when the mouse is over the image.
• BORDER: The image's border is assigned a zero value.
• HEIGHT: The image's height is assigned the imgHeight parameter.
• WIDTH: The image's width is assigned the imgWidth parameter.

The last line of the function closes the A and DIV tags.

Created: November 9, 1998
Revised: November 9, 1998

URL: http://www.webreference.com/js/column29/linkedimagein.html