PDA

Click to See Complete Forum and Search --> : setTimeout question/making images show....

pnj
Nov 17th, 2000, 04:26 PM
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
Danial
Nov 19th, 2000, 07:31 PM
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


<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>
pnj
Nov 20th, 2000, 11:35 AM
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.