HTML and CSS Reference
In-Depth Information
Plan
Ahead
Creating the user-defined functions for the image rollovers.
To make the navigation bar on the Hickory Oaks Forest Preserve Web site work, three
user-defined functions must be written for the mouse events, one for each state of the
navigation button. The mouse event handlers you will use are onMouseOver, onMouseDown,
onMouseUp, and onMouseOut. The same function will be used for onMouseUp and
onMouseOut. Each function will do the following:
Use the button name, the state of the mouse (over, down, up, and out) associated
•
with the event handler, and the filename extension to construct the associated graphic
filename for that state
Use the getElementById() method to assign the filename to the correct image location
•
The id attribute with the <img> tag is used by the getElementById() method to identify the
correct button. When the function code is complete, the mouse event handlers are added to
the <img> tags to invoke the appropriate image rollover function.
Creating the JavaScript User-Defined
Functions for the Image Rollovers
You will write a user-defined function for each of the three states (up, over, and down) of
the button associated with a particular mouse event: a function named overButton() for
when the mouse is hovering over the button, which is invoked by the onMouseOver event
handler; a function named downButton() for when the user clicks the button, which is
invoked by the onMouseDown event handler; and a function named upButton() for when
the user releases the mouse button, which is invoked by the onMouseUp event handler.
If the user decides not to click that button, and moves the mouse off the button, the
onMouseOut event handler will also invoke the upButton() user-defined function.
Table 11-3 shows the general form of the JavaScript statement to assign a new
image to the defined location, using the <img> id attribute as part of the object.
Table 11-3 Assign Image to Defined Location
General form:
document.getElementById(id_attribute).src=”new image filename”
Comment:
where the new image appears in the same location as the original by assigning a new filename
to the image object source (src) property. The objectname in the JavaScript code must match the
object name in the id attribute of the image tag. Because the name attribute is depreciated in
the <img> you use the getElementbyId() property to identify the objectname.
Example:
document.getElementById(img).src=”chapter11-1home_over.gif”
To make the user-defined functions generic enough to work with all the possible
images for one button, use the getElementById() method with a variable to identify
the button graphic file and placeholder. Table 11-4 shows the general form of the
getElementById() method.
Table 11-4 getElementById() Method
General form:
getElementById('id_value')
getElementById(variable)
Comments:
where
getElementById()
is a method that returns the object with that specific id. The
id value
must be entered in quotation marks or as a valid variable name. As a string in quotation marks,
it is case-sensitive and must match exactly the tag id attribute. The returned value also can use
any properties associated with that value. The example below shows the method to assign a
new graphic file to an image placeholder, using a variable name (img) in the method.
Example:
buttonImg
5
“chapter11-1”
1
img
1
“_over.jpg”
document.getElementById(img).src
5
buttonImg
