setTimeout question/making images show....

**pnj** · Nov 17th, 2000, 05: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, 08: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

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>

**pnj** · Nov 20th, 2000, 12:35 PM

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.

Thread: setTimeout question/making images show....

Thread Tools

Display

Posting Permissions