Click here to show Straight Line Depreciation Graph ---->
Click here to show Sum-of-Years Digits Depreciation Graph ---->
Click here to show Double Declining Balance Depreciation Graph ------->
Click here to show all three graphs simultaneiously ------->
Click here to hide all of these graphs ----->

Click here to show Straight Line Depreciation Graph ---->
Click here to show Sum-of-Years Digits Depreciation Graph ---->
Click here to show Double Declining Balance Depreciation Graph ------->
Click here to show all three graphs simultaneiously ------->
Click here to hide all of these graphs ----->

JavaScript Verus DHTML Created by Macromedia Dreamweaver
Tutorial 1d
Bob Jensen at Trinity Unversity
Click Here to Return to the DHTML Tutorial Menu

DHTML = Dynamic HyperText Markup Language
(The DHTML code may not run properly in certain browsers.)

Illustration 1 (Comparing JavaScript versus DHTML Popup Windows)

Illustration 2 (Comparing JavaScript versus DHTML Nested Layer Animation )

Illustration 3 (Animating Audio Background)

Illustration 4 (Comparing JavaScript Alert Messaging With Dreamweaver Behaviors Messaging)

Illustration 5 (Demonstrating a slide show sequencing of five layers)

Click on the Illustrations Below:

Illustration 1 Comparing JavaScript versus DHTML Popup Windows

• Click on the arrow to view a popup window executed by JavaScript
  (Click here to view details of how to code the JavaScript for this.)
  
  
• Click on the arrow to view a popup window executed by DHTML
  (This was coded automatically in Macromedia Dreamweaver.)
  • First add a marquee layer "Murch" using the Marquee Layer icon (Window, Objects)
  • Adjust the size of the Murch Layer so that it will contain planned images and text
  • Paste the Murcheson Tower picture inside the Murch Layer
  • Add the left arrow picture and text for instructions on closing the window
  • Select the Murch Layer and use the property viewer to change the
    background color of the layer
  • Position the Murch Layer where you want the animation to begin
  • Use (Window, Timelines) to view the timelines
  • Select the Murch Layer and then click on (Modify, Add Object to Timeline)
    to add the Murch Layer to Timeline 1.
    
  • Extend the time line to 20 frames, click on the last frame, and move the
    Murch Layer to where you want the animation to end
  • Click on (Window, Behaviors) to view the Behaviors
  • Select the arrow image in the Murch Layer and add an onClick behavior
    to the arrow image; For behavior chose Show-Hide Layers and elect to
    hide the Murch Layer onClick
  • Select the right arrow image in the main document where you want to trigger
    the animation. Add an onClick behavior to the right arrow image that performs the
    following behaviors in the order "Show Murch Layer," "Go to Timeline Frame,"
    and "Play Timeline." for Timeline 1.
    
    

  Click Here to Return to Table of Contents

Illustration 2 Comparing JavaScript versus DHTML Nested Layer Timelines

• Click on the Right Arrow to View an Excel Graph Popped Up With JavaScript
  (Click here to view details of how to code the JavaScript for this.)
  
  
  
• Click on the Right Arrow to View an Excel Graph Popped Up With DHTML Nested Animation
  (This was coded automatically in Macromedia Dreamweaver.)
  
  
  • First add a marquee layer "cwindow" using the Marquee Layer icon (Window, Objects)
  • Adjust the size of the cwindow Layer so that it will contain planned images and text
  • Paste the cwindow.jpg picture inside the cwindow2 Layer
  • Repeat above steps for cwindowr, cwindowg, cwindowb, and cwindow1 Layers
  • Position the above layers where you want animations to begin
  • Select the cwindow Layer and then click on (Modify, Add Object to Timeline)
    to add the cwindow Layer to Timeline 2 .
  • Repeat the step for other timelines and other layers

  Click Here to Return to Table of Contents

Illustration 3 Combining Animation With Audio (Your computer must be able to play wav files)

• Click on the right arrow to hear an audio file ---->
  • Click on (Window, Behaviors) to show behaviors dialog box
  • Select right arrow image
  • Add an onClick control to the right arrow image
  • Select the onClick behavior and add a Control Sound behavior
    
    
•   Click on the right arrow to view an animation with an audio background ----->

Click Here to Return to Table of Contents

Illustration 4 Comparing a JavaScript alert("message") with a Dreamweaver Behavior Message

Click on the right arrow to view a JavaScript alert("message")

• The JavaScript function for this reads as follows:
  function messageAlert()
  {
  alert ("You are reading this message courtesy of an alert JavaScript message.")
  }
• The hyperlink attached to the right arrow image reads: JavaScript:messageAlert()

Click on the right arrow to view a Dreamweaver message behavior

• Insert the right arrow image
• In Dreamweaver, click on (Window, Behaviors)
• Select the right arrow image and choose the onClick behavior on the left side of the Behaviors window
• Choose popup message as the behavior
• Type in the message: You are reading this message courtesy of a DHTML popup message.

Click Here to Return to Table of Contents

Illustration 5 Demonstrating a slide show sequencing of five layers

• Click on the right arrow to
  start a 30 second slide show

Go to top of this document

Click Here to Return to the JavaScript Tutorial Menu

Java and JavaScript Operators and Expressions

Click Here for JavaScript References

Return to Bob Jensen's Main Index Page