Dynamic HTML can be used to enchance the interactivity of a web page.
The interactivity is at the client end without any extra transactions
to the server. DHTML uses four different technologies.
DHTML = HTML + CSS + JavaScript + DOM
You are familiar with the first three. DOM (Document Object Model) is
an Application Programming Interface (API) to interface with the
browser software. DOM is quite general and can be used with XML
documents and programming languages like Java, Perl, and C++. A subset
of DOM, namely HTML DOM is usually used to interface HTML documents
and JavaScript.
In the normal sequence of events: The browser parses an HTML document and renders it. A user event causes a JavaScript function to be executed by the browser. The function changes the state of the DOM (or Browser Object) and this causes an instantaneous change in the Web page rendition.
The Browser Object (known as DOM0) can manipulate windows, HTML forms, and creating rollover images. Objects such as forms and images are found at predictable locations in a the object tree but not so with elements like span and div which allows style specification through CSS. HTML DOM allows such elements to be accessed through a unique ID. There is a method getElementByID() that returns a reference to the particular HTML element. Then using the reference the CSS style properties can be changed dynamically. Let us see how the rendition is changed in three cases.
In the first example the appearance of a block changes as the mouse moves over it. This is known as roll over effect. There are two JavaScript functions onmouseover and onmouseout.
In the second example the visibility status of a block can be changed by changing the CSS style attribute visibility from hidden to visible. Also we can arrange the blocks in layers as if in 3-dimensional space using the z-index. One can think of the z axis as being perpendicular to the screen. Higher z-index values would indicate being away from the screen and towards the viewer. Here the visibility property changes as the mouse moves over. Note the relative orientation of the blocks in the z-direction.
In the third example a block can be made to move across the screen. When the page first loads the div block is absolutely positioned at the top left corner of the page. Each time the block is clicked the block moves right and down. This effect is achieved by adding 10 to the y-coordinate and 50 to the x-coordinate. Here is a demonstration of that effect.