Flash animation in JavaScript: Changing style Properties
<!-- ***********************************************************
Example 5-9
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O'Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.com
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Changing style Properties</title>
<style type="text/css">
#hot1 {color:red}
</style>
<script language="JavaScript" type="text/javascript">
// Set global variables
var totalCycles = 0;
var currColor = 0;
var colors, intervalID;
// Build array of color names
function init() {
colors = ["red", "green", "yellow", "blue"];
}
// Advance the color by one
function cycleColors() {
// reset counter to 0 if it reaches 3; otherwise increment by 1
currColor = (currColor == 3) ? 0 : ++currColor;
// set style color to new color from array
document.getElementById("hot1").style.color = colors[currColor];
// invoke this function again until total = 27 so it ends on red
if (totalCycles++ < 27) {
intervalID = setTimeout("cycleColors()", 100);
} else {
clearTimeout(intervalID);
}
}
</script>
</head>
<body onload="init(); cycleColors();">
<h1>Welcome to the <span id="hot1">Hot Zone</span> Web Site</h1>
<hr>
</body>
</html>
Related examples in the same category
