Entry

How do I make a link change its color 3 times instead of once when the mouse goes over?

How do I make a link change its color 3 times instead of once when the mouse goes over?

Jun 24th, 2002 10:18
David Blackledge,

Here's the simplified IE-only version:
<A href="..." 
onmouseover="colorup(this)" onmouseout="colordown(this)">blah</a>
// set up an array of color values named "colors"
var colors = new Array("gray","silver","white");
var thelink = null;
function colorup(link){
 // check if not IE or similar
 if(typeof(link.style) == "undefined") return;
 // in case there's a leftover timeout:
 if(thelink != null)
  clearTimeout(thelink.colorTimeout);
 thelink = link; // set global reference variable
 if(thelink.colorindex == null)
  thelink.colorindex = 0;
 else
  thelink.colorindex++;
 if(thelink.colorindex >= colors.length) {
  thelink.colorindex = null; //reset
  return; // done recursing.
 }
 thelink.style.color=colors[link.colorindex];
 thelink.colorTimeout = setTimeout("colorup(thelink)",200);
}
just make colordown() the same but starting at colors.length-1 and going 
down (re-use thelink and do the clearTimeout to prevent a link going up 
and down at the same time)
To make it work in N4, see:
http://www.faqts.com/knowledge_base/view.phtml/aid/14609
David. 
http://David.Blackledge.com