Pass the mouse pointer over the words below to display text in a specific
area. View source.
(This text will be replaced when you pass the mouse pointer over a president's name.)
I would rather be exposed to the inconveniences
attending too much liberty than to those attending too small a degree of it.
If I were two-faced, would I be wearing this one?
We have nothing to fear, but fear itself.
Ask not what your country can do for you, but what you can do
for your country.
This example uses onMouseOver and onMouseOut event-handlers,
the visibility property of the layers object, and a function "MM_showHideLayers"
to display specific quotations in place of the initial phrase. The quotations
(text phrases) are stored within layers defined as HTML divisions.
A layer can be thought of as transparency film which is either hidden
or visible. A set of layers can be constructed to hold a group of images
or text, one or more of which can be displayed within an area on the web
page.
The onMouseOver and onMouseOut event-handlers call a function "MM_showHideLayers"
and pass parameters (information) to it, causing a layer to be displayed
or hidden by changing the value of the visibility property from hidden to visible and
vice versa. For example, when the mouse pointer is passed over President
Jefferson's name, the onMouseOver event-handler calls the MM_showHideLayers
function, and passes to it information which will 1) change the visibility
property of the initial layer from visible to hidden, and 2) change the
visibility property of President Jefferson's quotation layer from hidden
to visible. The associated onMouseOut event-handler also calls the MM_showHideLayers
function, but passes to it information which will restore the original values
of the visibility properties for the two layers. The JavaScript event-handlers
and functions were inserted automatically into the HTML file by Dreamweaver
as the behaviors were assigned to the Presidents' names.
The JavaScript instructions which comprise the event-handler and action
in this example can be reviewed by clicking on the "View Source" link
above, and are shown in bold face.
- In example 2, the JavaScript instructions which perform the actions are
placed into the <HEAD>...</HEAD> area. The action is a function
supplied by Dreamweaver named "MM_showHideLayers" (which, in turn,
calls another function supplied by Dreamweaver named "MM_findObj").
- Event-handlers are placed within the HTML tags with which they are associated.
In example 2, each link shown above has two event-handlers associated
with it; one event-handler is activivated when the onMouseOver event occurs,
and the the other is activated when the onMouseOut event occurs. Each pair
of event-handlers has been placed into the respective <A> (anchor)
tag which defines the link. Each event-handler identifies which event
the browser will respond to, and the action to be initiated. The actions
to be initiated in example 2 are calls to a function which will
carry out the intended action. In example 2, the events are the onMouseOver
and onMouseOut, and the action to be initiated for each is the function
call "=MM_showHideLayers(...)" containing
the names of the layers to hide and show.
Download a self-extracting zip-file
which contains the HTML portion of Example 2 with instructions for building
this example with Dreamweaver. The zip-file contains the HTML file (example2b.htm).
- Please read these instructions before clicking on the link above to initiate
the download.
- After you click on the link above, you will be asked to specify a destination
directory into which the self-extracting zip-file will be stored. You can
either type in a directory path or navigate to an existing directory. (You
could even create a new directory into which this file will be stored.)
- After the download finishes, run (execute) the self-extracting zip-file
to unpack and save example2b.htm.
- If you know where the file has been saved, click on Start, then Run.
Either specify the directory path or use "Browse" to navigate
to the file example2.exe, and open it. Click on the OK button to run it.
- If you're not sure where the self-extracting zip-file has been saved,
click on Start, then Find, then Files or Folders,
and specify example2.exe for Named:, and (C:) for
Look in:. After Find displays the found file example2.exe, double-click
on the name "example2.exe" to run it.
- As the zip-file begins to run, it will ask you to specify a destination
directory into which example2b.htm can be saved. As before, you can either
type in a directory path or navigate to an existing directory. (You could
even create a new directory into which this file will be stored.)
- When example2b.htm has been saved, open example2b.htm with Dreamweaver and
have fun making the enhancements.
Return to Having Fun with JavaScript.