Thanks but that wont do it. I need the text to gradually change from one
black to red over a period of time, pause a few seconds, and the gradually
change back again. Here's a lame attempt I made at doing this which should
give you an idea of what I'm trying to do, but it doesn't work too good.
also, do you have any good ideas on how to iterate through different shades
of a color? What I did below seems to be a lot of code for this effect.
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Charmpix</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="
http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<LINK href="Styles/Main.css" type="text/css" rel="stylesheet">
<SCRIPT language="javascript" type="text/javascript">
var myTimer;
var myTimer2;
var counter=1;
function window_onload()
{
//myTimer = setInterval("GoRed()",50);
}
function ChangeColor()
{
counter=1;
myTimer = setInterval("GoRed()",150);
counter=1;
myTimer = setInterval("GoBlack()",150);
}
function GoRed()
{
switch (counter)
{
case 1:
form1.Text1.style.background = "black"
break;
case 2:
form1.Text1.style.background = "#4b0000"
break;
case 3:
form1.Text1.style.background = "#5f0000"
break;
case 4:
form1.Text1.style.background = "#730000"
break;
case 5:
form1.Text1.style.background = "#820000"
break;
case 6:
form1.Text1.style.background = "#910000"
break;
case 7:
form1.Text1.style.background = "#910000"
break;
case 8:
form1.Text1.style.background = "#a50000"
break;
case 9:
form1.Text1.style.background = "#b90000"
break;
case 10:
form1.Text1.style.background = "#cd0000"
break;
case 11:
form1.Text1.style.background = "#d70000"
break;
case 12:
form1.Text1.style.background = "#eb0000"
break;
case 13:
form1.Text1.style.background = "#ff0000"
break;
}
counter++;
form1.Text2.value=counter
if(counter==14)
{
clearInterval(myTimer);
}
}
function GoBlack()
{
switch (counter)
{
case 1:
form1.Text1.style.background = "#ff0000"
break;
case 2:
form1.Text1.style.background = "#eb0000"
break;
case 3:
form1.Text1.style.background = "#cd0000"
break;
case 4:
form1.Text1.style.background = "#d70000"
break;
case 5:
form1.Text1.style.background = "#b90000"
break;
case 6:
form1.Text1.style.background = "#a50000"
break;
case 7:
form1.Text1.style.background = "#910000"
break;
case 8:
form1.Text1.style.background = "#910000"
break;
case 9:
form1.Text1.style.background = "#820000"
break;
case 10:
form1.Text1.style.background = "#5f0000"
break;
case 11:
form1.Text1.style.background = "#730000"
break;
case 12:
form1.Text1.style.background = "#4b0000"
break;
case 13:
form1.Text1.style.background = "black"
break;
}
counter++;
form1.Text2.value=counter
if(counter==14)
{
clearInterval(myTimer);
}
}
</SCRIPT>
</HEAD>
<BODY LANGUAGE="JavaScript" onload="return window_onload()">
<FORM name="form1">
<P><INPUT id="Text3" type="text" name="Text3">
<br>
<INPUT id="Text2" type="text" name="Text2">
<br>
<INPUT id="btnTest" type="button" value="test" name="btnTest"
ONCLICK="ChangeColor()"><INPUT id="Text1" type="text" name="Text1"
style="BACKGROUND-COLOR: black"><br>
<!-- this is a table just to show us what colors we're working with -->
<table>
<tr>
<td bgColor="black">xxx</td>
</tr>
<tr>
<td bgColor="#4b0000">xxx</td>
</tr>
<tr>
<tr>
<td bgColor="#5f0000">xxx</td>
</tr>
<tr>
<tr>
<td bgColor="#730000">xxx</td>
</tr>
<tr>
<tr>
<tr>
<td bgColor="#820000">xxx</td>
</tr>
<tr>
<td bgColor="#910000">xxx</td>
</tr>
<tr>
<td bgColor="#910000">xxx</td>
</tr>
<tr>
<td bgColor="#a50000">xxx</td>
</tr>
<tr>
<td bgColor="#b90000">xxx</td>
</tr>
<tr>
<td bgColor="#cd0000">xxx</td>
</tr>
<tr>
<td bgColor="#d70000">xxx</td>
</tr>
<tr>
<td bgColor="#eb0000">xxx</td>
</tr>
<tr>
<td bgColor="#ff0000">xxx</td>
</tr>
</table>
</P>
</FORM>
</BODY>
</HTML>
