DHTML

Dynamic HTML refers to adding interactivity and animation to otherwise static HTML code implemented with a combination of HTML, JavaScript, and CSS. For example on this web site, I am using DHTML to control the visibility and scrolling of the text-area layer (click on the up and down arrows to the right if you haven't already figured that out :-)

DHTML Implementation:

DHTML is the combination of JavaScript and CSS in conjunction with HTML. It's implementation has been progressing rapidly since the 4.0 versions of browsers. Netscape 6 and IE 5+ support the JavaScript and CSS document object models with more consistency than the earlier versions - making it easier to code and add greater DHTML functionality to your web site.

DHTML Example: Sample

To view the source code for the DHTML used on this site, click the sample link above. As a basic walk-thru, the function uses rollovers to swap the up and down arrows for scrolling. The event handlers onMouseOver and onMouseOut are used in an <a href=""> tag to call the image swapping functions MM_swapImage and MM_swapImageRestore. In addition, the onMouseUp and onMouseDown event handlers are used to call the scroll and noscroll functions.

The scroll function accepts a parameter consisting of a negative integer (in this case -3) which is used to calculate the speed of the movement of the mainText layer. There are more complexities to this script than meets the eye - including a function for building the layer objects on this page defining the parameters of the mainText layer. The function then scrolls the mainText layer by changing the x & y coordinates of the layer thru Cascading Style Sheet Positioning (CSSP).