Forum Moderators: open
<script language=javascript>
<!--
var colors=new Array("F","E","D","C","B","A","9","8","7","6","5","4","3","2","1","0");
function voing(h)
{
window.setTimeout("voing(\""+h+"\")",20);
hi=eval(h);
var nu=-1;
for(var q=0;q<colors.length;q++)
{
if(hi.style.backgroundColor.charAt(1).toUpperCase()==colors[q])
{
var nu=q;
}
}
nu++;
if(nu==16)
{
nu--;
nu--;
}
hi.style.backgroundColor="#"+colors[nu]+colors[nu]+colors[nu]+colors[nu]+colors[nu]+colors[nu];
}
//-->
</script>
<span style="vertical-align:middle;border:1px solid black;width:200px;height:50px;background-color:#FFFFFF;color:red;cursor:hand;text-align:center;padding-top:12px" onMouseover="voing('document.getElementsByTagName(\'span\')[0]')">Orders</span><br><br>
<span style="vertical-align:middle;border:1px solid black;width:200px;height:50px;background-color:#FFFFFF;color:red;cursor:hand;text-align:center;padding-top:12px" onMouseover="voing('document.getElementsByTagName(\'span\')[1]')">Support</span>
nu--;
nu--;
into nu=0; but that wouldn't be very sophisticated.
Many sources say it's better to put the controller outside the function it calls. That also enables us to use setInterval(), which after all is meant to periodically execute code. So I ended up with this:
var colors=new Array("F","E", [et cetera] );
var countUp = true;
var nu=-1;
function voing(h) {
var hi = eval(h);
for(var q=0;q<colors.length;q++) {
if(hi.style.backgroundColor.charAt(1).toUpperCase()==colors[q]) {
nu=q;
}
}
if (nu == 15 && countUp) countUp = false;
if (nu == 0 &&!countUp) countUp = true;
if (countUp) nu++;
else nu--;
hi.style.backgroundColor="#"+colors[nu]+colors[nu]+colors[nu];
}
function bgc(h) {
bgcInterval = window.setInterval("voing(\""+h+"\")",20);
}
function stopbgc() {
window.clearInterval(bgcInterval);
}
I added the functions bgc(), which controls voing(), and stopbgc(), which can be called onMouseOut, with onMouseOut="stopbgc()". You will find it makes things easier on the eyes...