...

View Full Version : light sequence



forms
07-13-2011, 01:10 PM
Hi,

I need some advice.

I wanted to create a 4 by 4 grid in a webpage. Then i want to select a specific box in the grid to flash a certain colour.

There will always be a set sequence of the same sections lighting up with the same colours.
So row 2 col 2 flashes green, then row 4 col 1 flashes pink etc. With around 5 boxes being used out of 16.


How would i go about doing this?

Is using Javascript the best thing to use?

Any advice would be greatly appreciated.

Thanks.

Budreaux
07-13-2011, 07:51 PM
It sounds like a table would be the best bet and then use javascript to change the cells backgrounds. I did a quick search and came across this.

http://www.webmasterworld.com/forum91/485.htm

it's not exactly what you are doing, but it should get you on the right track.

forms
07-14-2011, 10:10 PM
Thanks so much.

The link you gave was a lot of help to get me started.

Thanks.

vwphillips
07-15-2011, 01:05 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<table border="1" >
<tr height="100" >
<td id="f1" width="100" >&nbsp;</td>
<td width="100" >&nbsp;</td>
<td id="f2" width="100" >&nbsp;</td>
<td width="100" >&nbsp;</td>
</tr>
<tr height="100" >
<td width="100" >&nbsp;</td>
<td id="f3" width="100" >&nbsp;</td>
<td width="100" >&nbsp;</td>
<td width="100" >&nbsp;</td>
</tr>
<tr height="100" >
<td width="100" >&nbsp;</td>
<td id="f4" width="100" >&nbsp;</td>
<td width="100" >&nbsp;</td>
<td id="f5" width="100" >&nbsp;</td>
</tr>
</table>

<script type="text/javascript">
/*<![CDATA[*/

function Flash(o){
this.obj=document.getElementById(o.ID);
this.color=o.Color;
this.ud=true;
this.onms=o.OnDuration||500;
this.offms=o.OffDuration||this.onms;
this.flash();
}

Flash.prototype.flash=function(){
var oop=this;
this.obj.style.backgroundColor=this.ud?this.color:'transparent';
this.ud=!this.ud;
setTimeout(function(){ oop.flash(); },this.ud?this.offms:this.onms);
}

new Flash({
ID:'f1',
Color:'red',
OnDuration:1000, //optional, default=500
OffDuration:500 //optional, default=OnDuration
});

new Flash({
ID:'f2',
Color:'green'
});

new Flash({
ID:'f3',
Color:'blue'
});

new Flash({
ID:'f4',
Color:'yellow'
});

new Flash({
ID:'f4',
Color:'#FFCC66'
});

new Flash({
ID:'f5',
OnDuration:100,
Color:'#FF33FF'
});

/*]]>*/
</script>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum