Introducing DOCJSLIB, Part I: DHTML Element Model - Doc JavaScript

DOCJSLIB DHTML Element Model

We have described earlier in this column the differences in DHTML model between the Netscape Navigator and Internet Explorer DHTML models. Both browsers support the DIV tag, so it is obviously the first choice that comes to mind when going to implement a cross-browser DHTML tag. The problem is that the DIV tag in Netscape Navigator does not support the onClick() event handler.

We have found that the DIV/A/IMG combination is the best fit for both browsers. The DIV tag provides the Style Sheet attributes that you can use for controlling its behavior. The A tag provides the onClick() event handler capabilities. The IMG tag is needed to provide a clicking area for the A tag, since the ancestor DIV tag cannot provide a clicking area for the descendent A tag.

The combination DIV/A/IMG describes the order among these tags. The A tag is a descendent of the DIV tag, and the IMG tag is a descendent of the A tag:

<DIV....>
   <A....>
      <IMG....>
   </A>
</DIV>

A mouse clicking in the image area of the IMG tag is identical to clicking any other HTML link. As explained later in this column, the link is not pointing to a URL, but rather to a JavaScript function which handles the clicking event.

Controlling the Style Sheet attributes is accomplished via a STYLE tag that is associated with the DIV tag. The final skeleton of our DHTML model is:

<STYLE....>
.
.
.
.
</STYLE
<DIV....>
   <A....>
      <IMG....>
   </A>
</DIV>

The image's GIF is controlled via the IMG tag's SRC attribute. It is not recommended to play around with the DIV tag's SRC attribute, and so we don't get or set it. We only set the IMG tag's SRC attribute.

Created: October 12, 1998
Revised: October 12, 1998

URL: https://www.webreference.com/js/column27/dhtmlmodel.html