effetto battaglia navale

[0horseman]

Ciao a tutti,
ho provato a fare una ricerca ma non ho trovato nulla che faccia al caso mio.

Ho una pagina html, nel cui body ho una semplicissima tabella 4x4 che rappresenta la griglia di una piccola battaglia navale, quindi a parte la prima cella in alto a sx che è vuota, nella prima riga ho le celle 1,2,3 e nella prima colonna le celle A,B,C e al centro(come per una matrice), di conseguenza A1, A2, A3, B1, B2, etc.

<table width="800" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td></td>
    <td id="1">1</td>
    <td id="2">2</td>
    <td id="3">3</td>
  </tr>
  <tr>
    <td id="A">A</td>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr>
    <td is="B">B</td>
    <td>B1</td>
    <td onmouseover="cambia('B','2')" onmouseout="torna('B','2')">B2</td>
    <td>B3</td>
  </tr>
  <tr>
    <td id="C">C</td>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
  </tr>
</table>

vorrei fare che passando col mouse su una cella del "campo di battaglia", cambiasse di colore lo sfondo della cella stessa e quello delle celle che indicano le coordinate, vale a dire se passo su B2, si colori di rosso la cella B2, la cella B e la cella 2 tramite le funzioni richiamate con onmousover e onmouseout.
Tra i tag head ho inserito le seguenti funzioni:

<script language="text/javascript">

function cambia(rig, col) {
if (document.getElementById) {
this.style.backgroundColor='#ff0000';
riga = document.getElementById(rig);
riga.style.backgroundColor='#ff0000';
colonna = document.getElementById(col);
colonna.style.backgroundColor='#ff0000';
}
}

function torna(rig, col) {
if (document.getElementById) {
this.style.backgroundColor='#ffffff';
riga = document.getElementById(rig);
riga.style.backgroundColor='#ffffff';
colonna = document.getElementById(col);
colonna.style.backgroundColor='#ffffff';
}
}
</script>

ma non capisco perchè non accade nulla
qualcuno ha qualche suggerimento?
grazie mille

[0horseman]

A chi interessasse ho risolto così
nell'head

<style type="text/css">
<!--
a.mare:link {
	text-decoration: none; background:#ffffff; display:block;
}
a.mare:visited {
	text-decoration: none; background:#ffffff; display:block;
}
a.mare:hover {
	text-decoration: none; background:#ff0000; display:block;
}
a.mare:active {
	text-decoration: none; background:#ffffff; display:block;
}
-->

</style>
<script language="javascript">
	function cambia_sfondo (x, y)
	{ document.getElementById(x).style.background='#ff0000';
	document.getElementById(y).style.background='#ff0000';
	 }

	function torna_sfondo (x, y)
	{ document.getElementById(x).style.background='#FFFFFF';
	document.getElementById(y).style.background='#FFFFFF'; }
</script>

mentre la tabella l'ho fatta così:

<table width="800" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td></td>
    <td id="cella1">1</td>
    <td id="cella2">2</td>
    <td id="3">3</td>
  </tr>
  <tr>
    <td id="A">A</td>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr>
    <td id="cellaB">B</td>
    <td>B1</td>
    <td id="cellaB2" onMouseOver="cambia_sfondo('cella2','cellaB')"  onMouseOut="torna_sfondo('cella2','cellaB')">B2</td>
    <td>B3</td>
  </tr>
  <tr>
    <td id="C">C</td>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
  </tr>
</table>

Sicuramente ci saranno altri metodi più puliti, ma io ho trovato questa come soluzione.
spero possa essere di aiuto a qualcuno