Is there anyway to do this with javascript?

**Ryan** · May 30th, 2003, 09:24 PM

Is there anyway to make fading tables like the the ones found on HomeLAN Xtreme using javascript instead of images?

**Web Design Forums** · May 30th, 2003 09:24 PM

JR · May 31st, 2003, 05:17 AM

where are the fading tables, i don't see them?...

i think it is possible, i will have a go, not promising anything though

JR · May 31st, 2003, 06:11 AM

just a quick go, using 1 menu button to see if this is what you want.

if you would like i will make one that can use multiple menu buttons and that is easy to add to. I will also need to know what colours etc. you want to use

**Ryan** · May 31st, 2003, 08:57 AM

That's perfect. Thanks alot.

JR · May 31st, 2003, 08:58 AM

if you need any help making the whole menu i can do it if you are having any problems

**Ryan** · May 31st, 2003, 09:06 AM

If you could make it so that I can use it with more than one table, that would be awesome.

JR · May 31st, 2003, 09:10 AM

different tables or table cells?

also, what colour do you want it?

**Ryan** · May 31st, 2003, 09:14 AM

I'm not sure of the colors that I want right now. Couldn't I just change them by changing the colors in the array?

Different table cells.

JR · May 31st, 2003, 09:27 AM

i can't seem to do it, if i post the erroneous code somebody should take a look and try to fix it

Code:

<html>
<head>
<title>Link Fade</title>
<script type="text/javascript">
var colors = new Array()
colors[0] = "#aaaaaa";
colors[1] = "#bbbbbb";
colors[2] = "#cccccc";
colors[3] = "#dddddd";
colors[4] = "#eeeeee";
colors[5] = "#ffffff";
i = 0;
function settimer(tableid) {
	timer = setTimeout("linkfader('" + tableid + "')", 100)
}

function linkfader(tableid) {
	document.getElementById(tableid).style.backgroundColor = colors[i];
	i = i + 1;
	if (i == 6) {
	i = 0
	} else {
	settimer("'" + tableid + "'");
	}
}
</script>
<style type="text/css">
.menu {
	border-width: 1px; 
	border-style: solid; 
	border-color: #000000;
	background-color: #ffffff;
	cursor: hand;
	font-family: verdana;
	font-size: 12px;
	color: #000000;
}
</style>
</head>

<body>
<table width="90" height="25">
<a href="#" onMouseOver="settimer('link1')">
<tr>
<td align="center" class="menu" id="link1">Link 1</td>
</tr>
</a>
<a href="#" onMouseOver="settimer('link2')">
<tr>
<td align="center" class="menu" id="link2">Link 2</td>
</tr>
</a>
</table>
</body>
</html>

**Ryan** · May 31st, 2003, 09:41 AM

When I tried it out, it doesn't fade, just changes a color. You have to go over it alot of times to get it to fade. Is there anyway to fix that?

Thread: Is there anyway to do this with javascript?

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions