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

The Linked Image Model: External View

Version 2.0 includes a DHTML element model that is built out of an <IMAGE> tag, which is positioned within an <A> tag, which in turn is positioned within a <DIV> tag. This model, which we introduced in our previous column, Introducing DOCJSLIB, A Cross-Browser JavaScript Library, supported mouse clicks within the image area.

In this column, we introduce a related, simpler DHTML element model, the Linked Image. It consists of the same HTML tag structure as the Clicked Image above (<DIV>/<A>/<IMAGE>), except that the outcome of the clicking is not programmable. The Linked Image is a simple link which opens the prespecified URL upon clicking the image. The Clicked Image, on the other hand, lets you define the handler of the clicking event. One of the popular event handlers is to open a prespecified URL. The Linked Image Model is a packaging of such an event handler. It eliminates the need to program the general event handler.

The DOCJSLIB Linked Image Model is created by calling the makeLinkedImage() function. Its definition reveals the image's parameters that you can control:

• imgID. This is a programmer-defined string that identifies the image in any future references. Your code should manage the images on your page through the images' IDs.
• imgURL. The URL of the image's GIF.
• linkURL. The link's URL. This URL will be opened upon clicking the image.
• imgHeight. The height of the image. Image will appear distorted if imgHeight is different from the GIF's width.
• imgHeight. The height of the image. Image will appear distorted if imgHeight is different from the GIF's height.
• imgAlt. The alternative textual representation of the image. Text will appear until image is loaded. Also, the text will pop up as a tip when mouse is over the image.
• posFromLeft. The distance in pixels from the left edge of the window to the left side of the image.
• posFromTop. The distance in pixels from the top edge of the window to the top side of the image.
• imgVisibility. Specify true if you want the image to be visible, or false otherwise.
• imgZindex. The image's Z index. The third dimensional index of the image with respect to other overlapping elements. An element with a higher index will cover an element with a lower index.