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

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:

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:

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

http://www.internet.com


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

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