"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 me at e-mail email@example.com.
How to Use Java Script in Dreamweaver
Created by Helen Rallis based on Java Script workshop by
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.
- Highlight the word that you want to have the action/behaviors attached to.
- 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).
- Open the behaviors window
- To establish an event or an action, click on the plus sign. This will show
all the things it can do (Java script routines)
- We want to display a pop-up message --> so click on this --> choose
- In the box that appears type the text message that you want to appear when
you click on it
- Click the OK button.
- Example: Move the mouse over the following link to get a Java Script message:
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
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.
- Create a table with two columns, on row. In the first column, type in the
name of objects.
- In the next column, opposite the image name, you will bring in an image.
- 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)
- Name this image blank (or anything you want to call it)
- Insert the image that you have called blank
- Click on this blank image --> and choose Window --> Properties.
- Type blank into the text box located just to the right of the blank,
white image (below the word "Image".)
- Click once on the text string malachite
- Create a link (#)
- From the Window menu --> Choose behaviors.
- Click on the plus-sign button to display a list of behaviors.
- Choose Swap Image.
- 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.
- Verify that the check boxes Preload Images and Restore Images
onMouseOut are both checked.
- Click in the browse button next to Set Source and browse to find the image
you want to appear on mouse over
- Click on the OK button to close the Swap Image window.
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:
- 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
- Insert the base map
- In the properties box, next to where it says map, type in the name of the
map (In this case, north_america)
- Draw hotspots (using the polygons) for each region --> name each hotspot
in the properties panel.
- Make sure each hotspot is a link (to the # sign, as you did in the above
- Click on each hotspot in turn --> in the behaviors palette click on the
plus sign --> choose swap image.
- Browse to the location of the image you want to appear on the mouse over
for this region of your map.
- Click on the OK button and close the swap image box.
to the Index of How To Guidelines