|
<!-- ***********************************************************
Example 5-10
"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 className Properties</title>
<style type="text/css">
.red {
color: red;
border: 2px solid red;
}
.green {
color: green;
border: 2px solid yellow;
}
.yellow {
color: yellow;
border: 2px solid blue;
}
.blue {
color: blue;
border: 2px solid green;
}
</style>
<script language="JavaScript" type="text/javascript">
// Set global variables
var totalCycles = 0;
var currColor = 0;
var classes, intervalID;
// Build array of rule selector names
function init() {
classes = ["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").className = classes[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 class="red" id="hot1">Hot Zone</span> Web Site</h1>
<hr>
</body>
</html>
|
