The important point in this example is the word changehead, which is the
name of the script function that you want executed when the timer finishes
its countdown.
Changehead(or whatever function name you choose to use) is carried
out automatically after the interval is over; three seconds in this example.
(To make something happen after a delay of one minute, you would use
60,000 milliseconds.)
Here’s what happens, blow by blow, when you load the source code from the
previous example into a browser:
- When the page is loaded (onload), the startTimerfunction is executed.
- The startTimerfunction specifies that after 3000 milliseconds, the
changeheadfunction is started: timerhandle = setTimeout
(“movep”,3000).
- After the timer counts down three seconds, the changeheadfunction
does two things to the style of the H1 object. It changes the color and
adjusts the font size:
h.style.color = “slateblue”
h.style.fontSize = “36”
- Notice that you can name a paragraph (or a headline or other HTML
element) by using the IDattribute, like this: . Then in a
function, you can adjust that element’s properties by specifying its
name: h, or whatever ID you gave the element.
- Finally, when the page is unloaded (onunload=”stopTimer()), the
stopTimerfunction uses the clearTimeoutcommand to destroy
the timer.
Another use for delays is displaying a splash screen. You may want to show
visitors an attractive graphic screen for a few seconds before displaying your
Web site’s home page. Consider displaying a five-second splash screen to
intrigue them. Then display or fade into your real home page automatically
(the user doesn’t have to click anything — a timer does the work). To show a
splash screen, display the graphic page until a timer counts down, and then
hide that page and show your home page proper. This code shows you how
to display one image (andy.jpg on my computer) for five seconds, and then
replace that image with another named colorriot.jpg.
<html>
<head>
<script LANGUAGE=”VBScript”>
function startTimer()
292 Part IV: Advanced CSS Techniques
