|
|
blinking header
A blinking header is a handy way to add some motion to an otherwise boring document. The blinking effect is achieved by simply changing the text color from the original color to the new color and back again. We use the style.color statement to alter the text color. This color can be stated as a named color, hex color, or RGB color.
<html>
<head>
<script type="text/javascript">
function blinking_header() {
if (!document.getElementById('blink').style.color) {
document.getElementById('blink').style.color="red";
}
if (document.getElementById('blink').style.color=="red") {
document.getElementById('blink').style.color="black";
} else {
document.getElementById('blink').style.color="red";
}
timer=setTimeout("blinking_header()",100);
}
function stoptimer() {
clearTimeout(timer);
}
</script>
</head>
<body onload="blinking_header()" onunload="stoptimer()">
<h1 id="blink">Blinking header</h1>
</body>
</html>
Two event handlers were used (onLoad and onUnload) in the BODY tag to activate the JavaScript functions given in the HEAD of the document. An id attribute has been set to tell the script which page element to apply the changes to. You may use many different color changes on many different page elements with one event handler to change them all at the same time or you can alter one at a time. Just use many different and unique id values.
You may use a variable name instead of the named color we used as well. This is so the decision to select the color being changed exists. This decision can be made by other JavaScript functions. The function decides the value and makes it available to the style.color statement. The event handler activates the function and the change is made.
|
|
