HTML and CSS Reference
In-Depth Information
The code for each of the functions is shown in Table 11-5. The functions will be
associated with mouse event handlers, so when the user places the mouse over a button,
clicks a button, releases a button, or moves the mouse off a button, the button changes to
the appropriate image.
Table 11-5 JavaScript Code for User-Defined Functions
Line
Code
6
<script type=”text/javascript”>
7
<!-- Hide from old browsers
8
function overButton(img) {
9
buttonImg=”chapter11-1”+img+”_over.gif”
10
document.getElementById(img).src=buttonImg
11
}
12
13
function downButton(img) {
14
buttonImg=”chapter11-1”+img+”_down.gif”
15
document.getElementById(img).src=buttonImg
16
}
17
18
function upButton(img) {
19
buttonImg=”chapter11-1”+img+”_up.gif”
20
document.getElementById(img).src=buttonImg
21
}
22
23
//-->
24
</script>
Line 6 starts a JavaScript section. Line 7 is a standard HTML comment to hide
the JavaScript code from older browsers. Line 8 defines the user-defined function,
overButton() with the parameter img. Img is passed to the function to create the name
of the image file needed for that event. Line 9 constructs the image filename using the
parameter, and line 10 uses the getElementById to assign the new file image to the <img>
tag using the src property. Lines 13 and 18 define the downButton() and upButton()
functions. Lines 14 and 19 construct the appropriate image filename, and lines 15 and 20
assign the new image to the <img> tag. Lines 11, 16, and 21 close the functions, and lines
23 and 24 close the comment and the JavaScript section.
