HTML and CSS Reference
In-Depth Information
To Create User-Defined Functions for Image Rollovers
The following step enters the code to create the user-defined functions for the image rollovers.
1
•
line after the title
code).
Click line 6 (the blank
beginning script
section code
•
Table 11-5 on the
previous page to
create the JavaScript
user-defined
functions for each
button, indenting as
shown. Do not press
the
e n t e r
key after the
closing </script> tag
(Figure 11-4).
Enter the code from
code to display
rollover image when
mouse over button
code to display rollover
image when mouse
button clicked
code to display rollover
image when mouse
removed from button
closing script
section code
do not press
e n t e r
key
Figure 11-4
To Enter Mouse Event Handlers to Invoke User-Defined Functions
The next step is to enter the mouse event handlers in the <img> tags. Table 11-6 shows the code to add the
mouse event handlers to the <img> tags.
Table 11-6 Code to Enter the Mouse Event Handlers in the <img> Tags
Line
Code
onMouseOver=”overButton('home')” onMouseDown=”downButton('home')”
onMouseOut=”upButton('home')” onMouseUp=”upButton('home')”
88
…
92
onMouseOver=”overButton('center')” onMouseDown=”downButton('center')”
onMouseOut=”upButton('center')” onMouseUp=”upButton('center')”
…
96
onMouseOver=”overButton('shop')” onMouseDown=”downButton('shop')”
onMouseOut=”upButton('shop')” onMouseUp=”upButton('shop')”
…
100
onMouseOver=”overButton('trails')” onMouseDown=”downButton('trails')”
onMouseOut=”upButton('trails')” onMouseUp=”upButton('trails')”
Line 88 adds the mouse event handler for the Home button. Line 92 adds the
mouse event handler for the Center button. Line 96 adds the mouse event handler for the
Shop button. Line 100 adds the mouse event handler for the Trails button.
