Javascript Programming: DHTML

Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language (usually JavaScript) that allows you to change style or positioning properties of HTML elements. The word dynamic can mean different things in different web-related contexts. Don’t confuse Dynamic HTML with the idea of a dynamic web page, which means a web page generated dynamically by server-side code before being served to a visitor.

The main difference between a regular HTML page and a DHTML page is that elements within the latter can be changed after the page has already been rendered. The re-rendering of elements often occurs where there is some form of interactivity between the user and the page being displayed in the browser window.

The interaction comes in the form of events (triggers) based upon movement and position of the mouse, activation and changing of values in form fields or the loading of web pages. For example, the following table lists a variety of mouse interactions that can be detected.

When these events occur, they can be used to trigger events. JavaScript can be used to capture these events and respond to them in a way defined by the developer.

Example #6

In example 6, we react to two different In mouse events. onMouseOver and onMouseOut. Each one changes the image to the corresponding button state. Here is how it is done

<img src="button1.jpg" width="100" height="30" id="myButton" onMouseOver="document.getElementById('myButton').src='button2.jpg'" onMouseOut="document.getElementById('myButton').src='button1.jpg'">

save the two images below to your computer by right clicking on them.

Unlike earlier examples, we did not have to specify this within the JavaScript tags. Since the information deals with user events, the browser assumes this to be JavaScript. You will notice that we have added a name attribute to the basic img tag. This allows us to get a handle on this particular object. In order to change an image, you have to give the image a name. In this case, the name is myButton, but it could be anything you like, just no spaces are allowed.

The next addition to the img tag is the mouse events. The first one, onMouseOver, changes the documents myButton objects source to Button2.jpg. The second, onMouseOut, changes the source of the image object to Button1.jpg.

In our final example of DHTML, we employ a couple of form buttons to act as a control to hide or show the display of an article. Specifically, we'll use CSS and an event to change the display attribute of the table from visible to hidden. CSS stands for Cascading Style Sheets, which is something that we will look at in more depth next class. If you view the source code for the example below you will notice something new in the head portion of the document. That would be your CSS information. This example will only work in Internet Explorer.

Example #7