Hola;
Aquí otra versión, te toca a tí mejorarlo:
Código HTML:
<html>
<head>
<title>Prueba tabla</title>
<script>
function uno(src)
{
with(document)
{
var cel = getElementById(src);
with(cel)
{
style.backgroundColor="yellow";
style.cursor='hand';
}
if (src != 1)
{
getElementById('1').style.backgroundColor="white";
}
fila('2');
getElementById('x').value = src;
}
}
function dos(src)
{
with(document)
{
var cel = getElementById(src);
with(cel)
{
style.backgroundColor="white";
style.cursor='default';
}
}
}
function fila(obj)
{
with(document)
{
var celda = getElementById('x').value;
if (celda != "")
{
var marcar = getElementById(celda);
switch(obj)
{
case "1":
marcar.style.backgroundColor = "yellow";
break
case "2":
marcar.style.backgroundColor = "white";
break
}
}
}
}
function ini()
{
with(document)
{
getElementById('1').style.backgroundColor = "yellow";
}
}
</script>
</head>
<body onload=ini();>
<table border=0 cellspacing=0 cellpadding=0 width=200>
<tr><td colspan=3 onmousemove=fila('1'); height=20></td></tr>
<tr>
<td width=50 onmousemove=fila('1');></td>
<td width=100 height=150 align=center>
<table border=1 cellspacing=0 cellpadding=0 width=120>
<tr>
<td>Item</td><td>Valor</td>
</tr>
<tr id=1 onmouseover=uno('1'); onmouseout=dos('1');>
<td>1</td><td>100</td>
</tr>
<tr id=2 onmouseover=uno('2'); onmouseout=dos('2');>
<td>2</td><td>152</td>
</tr>
<tr id=3 onmouseover=uno('3'); onmouseout=dos('3');>
<td>3</td><td>254</td>
</tr>
<tr id=4 onmouseover=uno('4'); onmouseout=dos('4');>
<td>4</td><td>155</td>
</tr>
<tr id=5 onmouseover=uno('5'); onmouseout=dos('5');>
<td>5</td><td>189</td>
</tr>
<tr id=6 onmouseover=uno('6'); onmouseout=dos('6');>
<td>6</td><td>322</td>
</tr>
<tr id=7 onmouseover=uno('7'); onmouseout=dos('7');>
<td>7</td><td>89</td>
</tr>
<tr id=8 onmouseover=uno('8'); onmouseout=dos('8');>
<td>8</td><td>782</td>
</tr>
</table>
</td>
<td width=50 onmousemove=fila('1');></td>
</tr>
<tr><td colspan=3 onmousemove=fila('1'); height=20></td></tr>
</table>
<input type=hidden size=5 id=x>
</body>
</html> Nos vemos.