Ciao a tutti!

Sono nuova di questo forum...ho un "piccolo" problema con javascript. Premetto che ne so poco di javascript...

Devo creare una pagina con div sovrapposti che appaiano e scompaiano cliccando sui relativi link-immagine con effetto rollover. Ovviamente il tutto funziona con Firefox ma non con IE ed Opera.

E' un po' che ci sto sopra ma non trovo la soluzione!

Ho fatto una pagina di prova sia con link-immagine che con semplici link di testo. Con questi ultimi lo script funziona su ogni browser. Purtroppo a me servono i link-immagine!

Qualcuno mi può aiutare per favore??!

Grazie!

Qui di seguito vi inserisco il codice della pagina di prova.


<!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="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function showDiv(divid){
document.getElementById(divid).style.display = 'block';
}
function hideDiv(divid){
document.getElementById(divid).style.display = 'none';
}
</script>
</head>
<body>
<table title="Menu di navigazione progetti">
<tr>
<td>
andromeda
</td>
<td>
padova
</td>
<tr />
<tr>
<td>
[img]../img/photo_gallery/gambato_icoOFF.jpg[/img]
</td>
<td>
[img]../img/photo_gallery/gwangiu_icoOFF.jpg[/img]
</td>
<tr />
</table>


<div id="andromeda" style="display: block">
[img]../img/photo_gallery/andromeda.gif[/img]
</div>
<div id="auditoriumPD" style="display: none">
[img]../img/photo_gallery/auditorium_padova.gif[/img]
</div>
<div id="gambato" style="display: none">
[img]../img/photo_gallery/gambato.gif[/img]
</div>
<div id="gwangiu" style="display: none">
[img]../img/photo_gallery/gwangiu.jpg[/img]
</div>

</body>
</html>