Forum Moderators: open

Message Too Old, No Replies

Fading background problem

It gets darker, but not lighter again.

         

adni18

9:55 pm on Dec 31, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here's my script. As you can see, the span's backgrounds get darker, but once they are completely black, they don't get lighter all the way! How can this be fixed?

<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>

RonPK

5:13 pm on Jan 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You could simply change

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...