Enhancements: JavaScript: Transparent JavaScript with Dreamweaver

If you've got Dreamweaver, you don't need to know anything about JavaScripts to use them for simple applications. Let's start with some of the automated options available in Dreamweaver. Then, you can adapt these scripts for other purposes.

Rollovers

Create simple rollovers using the following menus and options - Insert>Image Objects>Rollover Image in Dreamweaver.

Go to Minerals in Food for an example of using Dreamweaver JavaScripts for simple rollovers in a tutorial. Notice that the directions are in italics.

Go to Rocks in Our World for an example of using rollovers to check answers.

To build your own interactive page using photos and correct/incorrect answer graphics:

• Create a New Folder on your desktop called workshop.
• Save (right-click on link and SAVE LINK AS) the following graphics in this folder: Landmark Practice, Correct, Incorrect, St. Louis Arch, Mount Rushmore, and Statue of Liberty.
• Open the Dreamweaver practice document. Click at the bottom of the text. Use Insert>Image Objects>Rollover Image to insert each of the three rollovers.
• If you have time, create your own graphics (150x150pixels) in FireWorks to add to the activity. For the completed example, go to Landmarks of the USA.

Adapt Rollovers

You may not get exactly the results you wish using the standard Dreamweaver options. For example, you might want students to click on the photo rather than roll over the photo. You'll need to edit the JavaScript, however you don't need to know everything about JavaScript to make a small change.

To change your mouse rollovers to mouseclicks:

• View the Code in Dreamweaver.
  
• Find each instance of the word "onmouseover" in your code. Replace it with "onclick".
• For an example, go to Revised Landmarks of the USA.

Navigation Bars

Another JavaScript that comes with Dreamweaver is the navigation bar option. You'll need to create buttons in Fireworks or use buttons you find online. If you want them to look interesting, you'll have three different versions of your buttons: mouseup, mouseover, and mousedown.

To add a navigation bar to your Landmarks project:

• Save the following graphics on your hard drive: US Button, US Button Reverse, US Map, North America Button, North America Button Reverse, North America Map, World Button, World Button Reverse, World Map.
• Open Dreamweaver to your Landmarks Practice page.
• Click at the top of the page.
• Use the Insert>Image Objects>Navigation Bar to insert a menu with three options.
• Use Modify>Navigation Bar to make changes.
• For an example, go to Landmarks Navigation.

---