"How to" Guideline series is coordinated by Helen Mongan-Rallis of the Education Department at the University of Minnesota Duluth. If you have any questions, comments, or suggestions to improve these guidelines please e-mail hrallis@d.umn.edu.

How to Use Java Script in Dreamweaver

Created by Helen Rallis based on Java Script workshop by Roger Petry

In order to use these guidelines you will need Dreamweaver (for either Mac or Windows platforms). Launch Dreamweaver --> open a new page, and then follow the directions below:

Java Script for Displaying a Message

This is useful when you have text or an image on your web page and you want users to be able to learn more information about this text/image without having to click to go to another page. Example: You can use Java Script to alert users as to what will happen when they do click on a link.

1. Highlight the word that you want to have the action/behaviors attached to.
2. In the objects palette, under where it says link, type in the pound sign (#) --> this turns this text into a link (to the same page).
3. Open the behaviors window
   
   
   
4. To establish an event or an action, click on the plus sign. This will show all the things it can do (Java script routines)
5. We want to display a pop-up message --> so click on this --> choose pop-up menu
   
   
   
6. In the box that appears type the text message that you want to appear when you click on it
7. Click the OK button.
8. Example: Move the mouse over the following link to get a Java Script message: You are a star!

Mouse Over Image or Message Displayed in Specified Area

[Thanks to Penny Morton from the UMD Geology Department for the images shown below. These images were taken from Dr. Morton's online Geology 2300 course]

This is useful when you want to display an image or text in a designated space on your web page (as opposed to the pop-up alert window that appeared in the example above). Example: In a geology course, you may have the a list of minerals that students will be studying in that day's class. When users pass the mouse over the name of the mineral, you can have a picture pop up showing a photo of the mineral.

1. Create a table with two columns, on row. In the first column, type in the name of objects.
2. In the next column, opposite the image name, you will bring in an image.
3. Using an image editing program such as PhotoShop, create an image which is just a white box the size of the image you want to bring in -- > save it (as a .jpg or .gif)
4. Name this image blank (or anything you want to call it)
5. Insert the image that you have called blank
6. Click on this blank image --> and choose Window --> Properties.
7. Type blank into the text box located just to the right of the blank, white image (below the word "Image".)
   
   
   
8. Click once on the text string malachite
9. Create a link (#)
10. From the Window menu --> Choose behaviors.
11. Click on the plus-sign button to display a list of behaviors.
12. Choose Swap Image.
13. In the dialog box that appears, make sure the image that you want to swap (in this case the one called "blank") is selected in the top window.
14. Verify that the check boxes Preload Images and Restore Images onMouseOut are both checked.
    
    
    
15. Click in the browse button next to Set Source and browse to find the image you want to appear on mouse over
16. Click on the OK button to close the Swap Image window.
    Example:

Using Mouse Over to display regions within a map (or other graphic)

Thanks to Roger Petry of UMD ITSS for the maps used in the example below! Pass your mouse pointer over the map below. As you do this, the name of the map changes to the name of the country, and the country turns red.

Here's how you do this:

1. Insert the images that you will use into your Dreamweaver site (choose a location in the site that makes sense to you). You will need the original image (which will serve as the "shell" or base image that is linked to the other images) as well as images that you want displayed on the mouse over.
2. Insert the base map
3. In the properties box, next to where it says map, type in the name of the map (In this case, north_america)
4. Draw hotspots (using the polygons) for each region --> name each hotspot in the properties panel.
5. Make sure each hotspot is a link (to the # sign, as you did in the above example)
6. Click on each hotspot in turn --> in the behaviors palette click on the plus sign --> choose swap image.
7. Browse to the location of the image you want to appear on the mouse over for this region of your map.
8. Click on the OK button and close the swap image box.

Return to the Index of How To Guidelines