HTML and CSS Reference
In-Depth Information
EXAMPLE
12.13
</head>
<body bgColor="aquamarine">
7
<img src="blackbar.bmp" height="10" name="bar"/>
<p>Watching your Progress</p>
</body>
</html>
EXPLANATION
1 is fi d f ti n will e t e im e to e t t d i t lly y
.5 seconds.
2
As long as the length of the bar is less than 300 pixels, we enter this
if
block. If
not, the interval timer is stopped.
3
The width of the image is increased by 5 pixels every .5 seconds.
4
The height of the bar is at a constant 10; otherwise the browser will attempt to
increase the height of the bar to be proportional to the increase in the length.
5
The variable,
timer
, will be assigned the return value of the
setInterval()
function.
6
The window's
onload
method is assigned an anonymous function. When the page
has finished loading, this function starts the timer,
set Interval()
, which in turn
calls the
progress()
function every .5 seconds.
7
The image of a black bar will be displayed when the page is loaded (see Figure
12.27).
Figure 12.27
Making an image grow!
A story book without pictures is like a Web page without images: Doable, but not much
fun. This chapter demonstrated some of the ways you can animate a Web page using
JavaScript to manipulate images. Now you should know:
1. How JavaScript stores the images from a Web page.
2. How JavaScript stores the hyperlinks from a Web page.
3. How to draw the document tree with images and links using the Legacy DOM.
4. How to figure out how many links and images are on the page.
