-
check this code out.
+++++++++++++++++++++++++++++++
<script>
var optNum =1;
var n = 5;
var intTime = 30;
function BuildHorizontal()
{
optNum = eval(document.frmChoice.txtChoice.value);
if (n >= 1)
{
document ["sbh" + optNum + n] .src = "images/blue.gif"
n--;
setTimeout("BuildHorizontal()",intTime);
}
else
{
n = 1;
BuildVertical();
}
}
function BuildVertical()
{
if (optNum <= 4)
{
if (n <= 5)
{
document ["sb" + optNum + n] .src = ["images/blue.gif"]
n++
setTimeout("BuildVertical()",intTime);
}
else
{
n=1;
optNum++;
BuildVertical();
}
}
else
{
n = 4;
}
}
function ClearHorizontal()
{
if (n >= 1)
{
document["sbh" + optNum + n] .src = "images/empty.gif";
n--;
ClearHorizontal();
}
else
{
n = 1;
ClearVertical();
}
}
function ClearVertical()
{
if (optNum <= 4)
{
if (n <= 4)
{
document ["sb" + optNum + n] .src = "images/empty.gif";
n++;
ClearVertical();
}
else
{
n=1;
optNum++;
ClearVertical();
}
}
else
{
n = 5;
BuildHorizontal();
}
}
</script>
++++++++++++++++++++++++++++
the html looks like this
+++++++++++++++++++++++++++++++
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="8" height="8"><img src="images/empty.gif" width="8" height="8" name="sb11">1</td>
<td width="8" height="8"><img src="images/empty.gif" width="8" height="8" name="sbh11">2</td>
<td width="8" height="8"><img src="images/empty.gif" width="8" height="8" name="sbh12"></td>
<td width="8" height="8"><img src="images/empty.gif" width="8" height="8" name="sbh13"></td>
<td width="8" height="8"><img src="images/empty.gif" width="8" height="8" name="sbh14"></td>
<td width="8" height="8"><img src="images/empty.gif" width="8" height="8" name="sbh15">5</td>
</tr>
</table>
+++++++++++++++++++++++++++++
what I would like to happen is when the site is loaded,the blue image is loaded into the table cells using the setTimeout thing.
I have a form(for the frmChoice) and onLoad(to call the function) event but I just cant get this thing to work..
this should be fairly simple for an expert.
thanks
-
Hi pnj,
I am no exactly sure what are you trying to do, but i assume you are trying to write somthing similar to a graphic equlizer.
There are few errors in your code, so i wrote a new versiion of it.
Hope this helps.
BTW : This was only tested in ie 5.5
Code:
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
function LR(s,f) //left to right
{
//if (s
document["sbh"+s].src="images/blue.gif";
s++;
var temp="LR("+ s + "," + f+")";
if (s<=f)
setTimeout(temp,100);
else
clearImg();
}
function RL(s, f) //right to left
{
document["sbh"+s].src="images/blue.gif";
s--;
var temp="RL("+ s + "," + f+")";
if (s>=f)
setTimeout(temp,100);
else
clearImg();
}
function clearImg()
{
for (i=1;i<=6;i++)
document["sbh"+i].src="images/empty.gif";
}
</script>
</HEAD>
<BODY onload="javascript:RL(document.frm1.txtStart.value,document.frm1.txtEnd.value)">
<DIV align=center>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="8" height="8"><IMG height=8 name=sbh1 src="images/empty.gif" width=8>1</td>
<td width="8" height="8"><IMG height=8 name=sbh2 src="images/empty.gif" width=8>2</td>
<td width="8" height="8"><IMG height=8 name=sbh3 src="images/empty.gif" width=8>3</td>
<td width="8" height="8"><IMG height=8 name=sbh4 src="images/empty.gif" width=8>4</td>
<td width="8" height="8"><IMG height=8 name=sbh5 src="images/empty.gif" width=8>5</td>
<td width="8" height="8"><IMG height=8 name=sbh6 src="images/empty.gif" width=8>6</td>
</tr>
</table></DIV>
<FORM action="" id=FORM1 method=post name="frm1">
<P> </P>
<DIV align=center>
<TABLE border=1 cellPadding=1 cellSpacing=1 width="75%" style="HEIGHT: 32px; WIDTH: 314px">
<TR>
<TD>Start</TD>
<TD><INPUT name=txtStart style="HEIGHT: 22px; WIDTH: 57px" value=6></TD>
<TD> End </TD>
<TD><INPUT name=txtEnd
style="HEIGHT: 22px; WIDTH: 57px" value=1></TD></TR>
</TABLE></DIV>
<P align=center>
<INPUT id=button2 name=button2 type=button value="Right To Left" onclick="javascript:RL(document.frm1.txtStart.value,document.frm1.txtEnd.value)">
<INPUT id=button3 name=button3 type=button value="Left To Right" onclick="javascript:LR(document.frm1.txtStart.value,document.frm1.txtEnd.value)">
<INPUT id=button1 name=button1 onclick=clearImg() style="HEIGHT: 24px; WIDTH: 88px" type=button value="Clear Images"></P>
</FORM></BODY>
</HTML>
-
yea! that works great.
I will modify it to fit my needs.
what I am trying to do is on load of the html doc. build this line across the screen.
not real sure if it will look as cool as I think but I'll find out.
thanks a bunch.
