spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column29


The Linked Image Model: Internal View

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

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.

http://www.internet.com


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger


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

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