Article
About the Author
Chris Churchill
Chris is the Senior Marketing Manager for Keynote NetMechanic, which provides Website quality testing tools for Webmasters, site maintenance, promotion, and monitoring services, and has tuned over 54 million Web pages. Chris wears many hats at NetMechanic: Webmaster, search engine optimizer, and marketing guru. She's also the browser compatibility, Website usability, and optimization expert.
Create Pop-Up Notes with DHTML
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.
The CSS Component
Let's start by creating a simple Web page that includes our pop-up note.
To get the most out of this tutorial, I encourage you to work along with me using your favorite HTML editor. You should be able to copy-and-paste the sample HTML code shown in this article.
You can also check our example at each step using your browser. For now, please use Internet Explorer Version 5 or higher to do this. To make it easier to follow my examples, I'll first create our DHTML script in a way that only works for Internet Explorer. We'll add compatibility with other browsers as the last step.
So let's get started. Use the code below to create our simple Web page.
<html>
<head>
</head>
<body>
<p>The space program is run by <a href="#">NASA</a>.
<table bgcolor="yellow" width=250 cellpadding=6 cellspacing=0 border=1 >
<tr>
<td>
<p>The <b>N</b>ational <b>A</b>eronautics and <b>S</b>pace
<b>A</b>ministration.</p>
<a href="#">Close</a>
</td>
</tr>
</table>
</body>
</html>
This creates the static Web page shown below, with the yellow table appearing directly below our other page content. Notice that the pop-up note is always present, and it isn't placed where we want it to appear.
Now let's apply a style sheet to the yellow table. This allows us to position the table on the page so it looks like a pop-up attached to the word "NASA." The bold text below shows the new addition to our HTML code.
<html>
<head>
</head>
<body>
<p>The space program is run by <a href="#">NASA</a>.
<div id="n1" style="position:absolute; left:180; top:25; z-index:1;" >
<table bgcolor="yellow" width=250 cellpadding=6 cellspacing=0
border=1 >
<tr>
<td>
<p>The <b>N</b>ational <b>A</b>eronautics and <b>S</b>pace
<b>A</b>ministration.</p>
<a href="#">Close</a>
</td>
</tr>
</table>
</div>
</body>
</html>
All we've done here is wrap a DIV element around the yellow table. The DIV tag has a STYLE attribute that positions the table on the page. We've set four CSS properties in the STYLE attribute:
Position:absolute-- This tells the browser that we're positioning the box with respect to the top left corner of the browser window.Left:180-- This tells the browser to place the table 180 pixels from the left edge of the browser window.Top:25-- And this places the table 25 pixels from the top of the browser window.Z-index:1-- Finally, this tells the browser to place the table in front of our other page text.
Of these CSS properties, z-index probably causes the most confusion for designers who are new to style sheets. It defines a depth dimension for our page and determines which elements are placed in front of which other elements. By default, all page elements have a z-index of zero, so setting the z-index of our yellow table to 1 ensures that it appears in front of our other text.
Now save and view the Web page. It should look like the picture below. This is exactly the way our pop-up note appears after visitors click on the NASA link.
Next we'll add another property to our STYLE attribute, as shown below.
<div id="n1" style="position:absolute; left:180; top:25;
z-index:1;visibility:hidden;">
This adds a new visibility property and sets it to hidden. This means that the browser will hide everything inside the DIV element, and so the yellow table will be invisible. Try it and see for yourself.
After you've viewed the page this way, edit it again and change the value of the "visibility" property to "visible." Save the page and again view it in your browser. It should once again look like the picture above, with the pop-up note being visible.
So the operation of our DHTML script is really pretty simple: we position a colored table in the appropriate spot using CSS, and then show or hide the table by changing the CSS visibility property.
Having done this manually, the next step is learning how to use JavaScript to automatically change the visibility property when the user clicks on the appropriate links.