Entry
How can I periodically alter the color of a word or text?
Jan 23rd, 2001 07:27
Martin Honnen,
This is easily done for NN6, IE4+ and Opera 5 by setting up a function
with setTimeout which alters the
style.color
property of an element. As NN4 doesn't allow dynamic style change but
only layer rewriting additional efforts have to be taken.
The following provides a custom JavaScript FadeObject which works for
NN4, NN6, IE4+ and Opera 5. Two example usages are given:
<HTML>
<HEAD>
<TITLE>
change colors of words periodically
</TITLE>
<STYLE>
.layer { position: absolute; }
.placeHolder {
visibility: hidden;
}
</STYLE>
<SCRIPT>
var colors = ['blue', 'red', 'green'];
var delays = [4000, 2000, 2000];
var cur = 0;
function changeColor () {
cur = ++cur % colors.length;
if (document.getElementById)
document.getElementById('text').style.color = colors[cur];
else if (document.all)
document.all['text'].style.color = colors[cur];
tid = setTimeout('changeColor()', delays[cur]);
}
function FadeObject (text, colors, delays) {
this.text = text;
this.colors = colors;
if (typeof delays == 'number') {
this.delays = new Array(this.colors.length);
for (var i = 0; i < this.delays.length; i++)
this.delays[i] = delays;
}
else
this.delays = delays;
this.curColor = 0;
this.id = FadeObject.objects.length;
FadeObject.objects[this.id] = this;
this.htmlId = 'FadeObject' + this.id;
this.writeCSS();
this.writeHTML();
this.init();
}
function FadeObject_writeCSS () {
if (document.layers) {
var html = '';
html += '<STYLE>';
html += '#' + this.htmlId + '{';
html += ' color: ' + this.colors[0] + ';';
html += '}';
html += '<\/STYLE>';
document.write(html);
}
}
FadeObject.prototype.writeCSS = FadeObject_writeCSS;
function FadeObject_writeHTML () {
if (document.layers) {
var html = '';
html += '<SPAN ID="' + this.htmlId + '"';
html += ' CLASS="layer"';
html += '>'
html += this.text;
html += '<\/SPAN>';
html += '<SPAN CLASS="placeHolder">';
html += this.text;
html += '<\/SPAN>';
document.write(html);
this.element = document[this.htmlId];
}
else {
var html = '';
html += '<SPAN ID="' + this.htmlId + '"';
html += ' STYLE="color: ' + this.colors[0] + ';"';
html += '>';
html += this.text;
html += '<\/SPAN>';
document.write(html);
if (document.getElementById)
this.element = document.getElementById(this.htmlId);
else if (document.all)
this.element = document.all[this.htmlId];
}
}
FadeObject.prototype.writeHTML = FadeObject_writeHTML;
function FadeObject_init () {
if (document.layers && FadeObject.initialized
|| document.getElementById || document.all)
this.tid = setTimeout('FadeObject.objects[' + this.id
+ '].changeColor()', this.delays[0]);
}
FadeObject.prototype.init = FadeObject_init;
function FadeObject_changeColor () {
this.curColor = ++this.curColor % this.colors.length;
if (this.element.style)
this.element.style.color = this.colors[this.curColor];
else if (document.layers) {
this.element.document.open();
this.element.document.write('<FONT COLOR="' + this.colors
[this.curColor] + '">' + this.text + '<\/FONT>');
this.element.document.close();
}
this.tid = setTimeout('FadeObject.objects[' + this.id +
'].changeColor()', this.delays[this.curColor]);
}
FadeObject.prototype.changeColor = FadeObject_changeColor;
function FadeObject_staticInit () {
if (document.layers) {
FadeObject.initialized = true;
for (var i = 0; i < FadeObject.objects.length; i++)
FadeObject.objects[i].init();
}
}
FadeObject.objects = new Array();
FadeObject.initialized = false;
FadeObject.init = FadeObject_staticInit;
</SCRIPT>
</HEAD>
<BODY ONLOAD="FadeObject.init();">
All for
<SCRIPT>
var kibology = new FadeObject('Kibology',
['green', 'lightblue', 'yellow'], 3000);
</SCRIPT>. GOD is
<SCRIPT>
var kibo = new FadeObject('Kibo',
['orange', 'lime', 'red', 'blue', 'brown'], 2000);
</SCRIPT>.
</BODY>
</HTML>
