Fading Menu: Solo funciona cuando esta en forma vertical

[okram]

Hola

Soy un novato en javascript, la verdad no domino muy bien este lenguaje. Tengo un script de un menu cuyos items se resaltan progresivamente al pasar el mouse sobre ellos. Lo que pasa es que el script original (Lo baje de una pagina ) era de un menu en forma vertical, y yo quiero colcarlo en mi web en la parte superior de forma horizontal.

Estos son los codigos:

En mi archivo scripts1.js

Código:

nOpac = 50;
nPlus = 2;
nMin = 1;
speed = 50;
timer = null; 
timer2 = null;

var ie5=(document.all && document.getElementById);
var ns6=(!document.all && document.getElementById);

function fadeImg2(teller)
{
 apl[teller][1] = "Up";
 changes();
}

function fadeImgend2(teller)
{
 apl[teller][1] = "Down";
 setTimeout("changes()",50);
}

function changes()
{
 next_loop = true;
 for (i=0;i<apl.length;i++)
 {
  obj = link_table.rows[i].cells[0];
  opacity = apl[i][0]
  if (apl[i][1] == "Up")
  {
     opacity += nPlus;
     apl[i][0] = opacity;
     if (apl[i][0] > 105) 
      {apl[i][1] = "";}
     else
     {next_loop = false;}
	 nOpac = opacity;
  }
  else
  {
  if (apl[i][1] == "Down")
  {
     opacity -= nMin;
     apl[i][0] = opacity;
     if (apl[i][0] < 45) 
      {apl[i][1] = "";}
     else
     {next_loop = false;}
	 nOpac = opacity;
  }
  }
  if(ie5){ 
	obj.style.filter="alpha(opacity="+opacity+")";
    }
  if(ns6){ 
   	obj.style.MozOpacity = opacity + '%';
   }
 }
 if (next_loop == false)
  {
   timer = setTimeout("changes()",speed);
  }
  else
  {
   clearTimeout(timer);
  }
}

//for each link option you need to make a new Array;
var apl = new Array();
apl[0] = new Array(45,"");
apl[1] = new Array(45,"");
apl[2] = new Array(45,"");
apl[3] = new Array(45,"");
apl[4] = new Array(45,"");
apl[5] = new Array(45,"");

En estilos.css

Código:

td.menu         { padding:5; border:1px solid #000000; background-color:#000000; width:100; text-align:center; font-family:Arial Narrow; cursor: pointer; color:#FFFFFF; font-variant:small-caps; font-weight:bold }

Y en mi pagina (pageheader.tpl)

Código HTML:

<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
<tr>
<td class="menu" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)" 
onclick="window.location='#';">Home</td>
</tr>
<tr>
<td class="menu" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)" 
onclick="window.location='#';">New</td>
</tr>
<tr>
<td class="menu" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)" 
onclick="window.location='#';">About</td>
</tr>
<tr>
<td class="menu" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)" 
onclick="window.location='#';">Pictures</td>
</tr>
<tr>
<td class="menu" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)" 
onclick="window.location='#';">Partners</td>
</tr>
<tr>
<td class="menu" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)" 
onclick="window.location='#';">Contact</td>
</tr>
</table> 

Asi funciona bien, pero esta en forma vertical. Lo puse en forma horizontal, asi:

Código HTML:

<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
<tr>
<td class="menu" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)" 
onclick="window.location='#';">Home</td>
<td class="menu" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)" 
onclick="window.location='#';">New</td>
<td class="menu" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)" 
onclick="window.location='#';">About</td>
<td class="menu" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)" 
onclick="window.location='#';">Pictures</td>
<td class="menu" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)" 
onclick="window.location='#';">Partners</td>
<td class="menu" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)" 
onclick="window.location='#';">Contact</td>
</tr>
</table> 

pero el efecto fading se pierde. Revise cada letra del scripts1.js, y creo q tendria que cambiar esta linea:

Código:

  obj = link_table.rows[i].cells[0];

pense que cambiando rows a cols se arreglaria, pero nada. Espero me puedan ayudar

Salu2