Examples - Teach Yourself DHTML in 24 Hours

The examples (listings) from Teach Yourself DHTML in 24 Hours are listed below. When you select one, it will be displayed in your browser; if you would rather look at the JavaScript source, use your browser's View Source option. You can also download all of the files.

Note about CSS and JS files: these files can't be executed alone. Follow the link to the corresponding HTML file instead. If you download the HTML file, you'll also need the CSS and/or JS files it requires.

Browser note: most of these examples require Netscape 6 or Internet Explorer 5/6.

Part I: Getting Started

Hour 2: Reviewing HTML

• Listing 2.2: A simple HTML Document

Hour 3: Understanding JavaScript

• Listing 3.1: Using JavaScript to add link descriptions

Hour 4: Creating a Simple DHTML Example

• Listing 4.1: The original HTML document
• Listing 4.2: The HTML document with added DHTML link descriptions

Part II: Learning DHTML Basics

Hour 5: Understanding the DOM

• Listing 5.2: Hiding and Showing Objects

Hour 6: Creating Positionable Elements (Layers)

• Listing 6.1: A simple layered document
• Listing 6.2: Controlling layers dynamically

Hour 7: Working with DOM Properties and Methods

• Listing 7.1: Modifying attributes with DHTML
• Listing 7.2: Adding and Removing Nodes

Hour 8: Responding to Events

• Listing 8.1: Logging event handlers

Part III: Working with Style Sheets

Hour 9: Introducing Style Sheets

• Listing 9.1: A simple styled document

Hour 10: Using Style Sheet Properties

• Listing 10.1: CSS file (included below)
• Listing 10.2: Using an external style sheet

Hour 11: Controlling Styles with JavaScript

• Listing 11.1: Changing colors in DHTML
• Listing 11.2: Using dynamic styles

Hour 12: Creating Consistent Styles

• Listing 12.1: First CSS file (included below)
• Listing 12.2: Second CSS file (included below)
• Listing 12.3: Switching between style sheets (HTML)

Part IV: Dynamic HTML in Action

Hour 13: Creating Drop-down Menus

• Listing 13.1: Creating drop-down menus (HTML)
• Listing 13.2: Menu JavaScript file (included above)

Hour 14: Creating a Menu Tree

• Listing 14.1: Creating a navigation tree (HTML)
• Listing 14.2: Navigation tree JavaScript file (included above)

Hour 15: Creating DHTML Text Effects

• Listing 15.1: Blinking text example
• Listing 15.2: Moving text example
• Listing 15.3: Fading text example
• Listing 15.4: A DHTML scrolling message

Hour 16: Using DHTML for Animation

• Listing 16.1: Animation with DHTML
• Listing 16.2: An animated navigation tree

Part V: Learning Advanced Techniques

Hour 17: Dealing with Browser Differences

• Listing 17.1: Displaying browser information
• Listing 17.2: Using browser feature sensing
• Listing 17.3: Creating cross-browser animation

Hour 18: Using DHTML with Forms

• Listing 18.1: Modifying forms with DHTML
• Listing 18.2: Adding elements to a form
• Listing 18.3: A dynamic order form

Hour 19: Using Dynamic Fonts

• Listing 19.1: Microsoft WEFT dynamic fonts
• (Listing 19.1 requires Internet Explorer 4.0 or later)
• Listing 19.2: Truedoc dynamic fonts
• (Listing 19.2 requires Netscape 4 (not Netscape 6) or Internet Explorer 4.0 or later)

Hour 20: Troubleshooting DHTML

• Listing 20.1: Clock example (With Errors)
• Listing 20.2: Clock example (Corrected)

Part VI: Putting it all Together

Hour 21: Creating a Dynamic Site

• Listing 21.1: Vertical menus (HTML)
• Listing 21.2: Menu JavaScript file (included above)
• Listing 21.3: Scrolling message JavaScript file (included below)
• Modified Listing 21.1: Vertical menus + scrolling message (HTML)

Hour 22: Creating Complex Animations

• Listing 22.1: Following the mouse pointer
• Listing 22.2: Following the mouse pointer (improved)

Hour 23: Creating a DHTML Game

• Listing 23.1: The DHTML Hangman Game (HTML)
• Listing 23.2: Game functions JavaScript file (included above)
• Listing 23.3: Word list JavaScript file (included above)
• Listing 23.4: CSS File (included above)
• BONUS: A larger word list (JavaScript file, replaces Listing 23.3)

Hour 24: DHTML Tips and Tricks

• Listing 24.1: DHTML tool tips (HTML)
• Listing 24.2: Tool tip JavaScript file (included above)
• Listing 24.3: A DHTML scrolling window (HTML)
• Listing 24.4: Scrolling window JavaScript file (included above)