|
Java Script and other scripting languages allow you to modularize code easily by fitting it into functions. You
define a function once, then call it many times in a variety of situations. If we wanted to feature more than one bulleted item in our list of sites to visit, it would make sense to put
the rollover code into a function.
Here's some code that illustrates how functions can be put into use in our image rollover application:
<html>
<head>
<title>Image Rollover Demonstration with Functions</title>
<script language="JavaScript">
function lightOn()
{
document.images[0].src = "lightbulb_on.gif"
}
function lightOff()
{
document.images[0].src = "lightbulb_off.gif"
}
</script>
</head>
<body>
<h1>List of Ideas</h1>
<p>
<a href="http://www.yahoo.com"
onMouseOver="lightOn()"
onMouseOut="lightOff()"
>
<img name="bulletBulb" src="lightbulb_off.gif">
Let's visit Yahoo!
</a>
</body>
</html>
How does this work? Look at the event handlers again. They look like this now:
onMouseOver="lightOn()"
onMouseOut="lightOff()"
The code that's executed in each case consists of a call to a function. The
onMouseOver= event handler triggers the lightOn() function; the onMouseOut= event handler triggers the lightOff() function. We'll cover what functions are in our next tip.
|
