HTML and CSS Reference
In-Depth Information
Figure 12.26
Animated stick man appears to be running.
In Example 12.13 the width and height properties of the image object allow us to change
the size of an image dynamically. By increasing the width of a black bar image at set time
intervals, the bar appears to be lengthening as it is displayed.
EXAMPLE
12.13
<html>
<head><title>Progress Bar</title>
<script type="text/javascript">
1
function progress()
{
//
Set the width of the image every .5 second
2
if(document.images["bar"].width < 300){
3
document.images["bar"].width += 5;
document.images["bar"].height = 10;
//
Setting the height keeps the bar from getting taller
// as the image is widened.
}
else{
4
clearInterval(timer);
}
}
5
var timer;
6
window.onload = function(){
timer = setInterval("progress();",500);
//
Image is stretched every .5 seconds
}
</script>
Continues
