by Chris Churchill

When we talk about Dynamic HTML, we're really talking about using a scripting language like JavaScript to change Cascading Style Sheets on the fly. DHTML is the fusion of HTML coding and classic object-oriented programming.

This tutorial will illustrate that concept, and help you understand how JavaScript objects map to HTML elements on your Web page.

Along the way we'll learn how to create a useful DHTML script: a pop-up note like the one shown here. This simple script creates a yellow post-it note when a user clicks on a link. When the users clicks on the word "NASA," the note tells them that NASA is short for the National Aeronautics and Space Administration.

This script is handy for creating a footnote, a sidebar to an article, or to define an acronym like we have here.

A good way to understand how our pop-up note works is to first create the page using CSS alone, without the JavaScript component. Then we can manually change the CSS properties to understand the role JavaScript plays in the process...