far comparire una scritta al passaggio del mouse

Ciao a tutti...
ho cercato su questo forum e ho trovato parecchi esempi, molto piu complessi di quello che può servire a me, ho cercato di adattarli ma ho solo creato casini, quindi ricorro al vostro aiuto!!! (come sempre )

in ogni caso la mia domanda è più "didattica" che pratica...

io ho questa tabella con un pezzetto di java

<script type="text/javascript">


function Vedi(){
document.getElementById("01").style.display = 'block';
}
function Nascondi(){
document.getElementById("01").style.display = 'none';
}



function Vedi1(){
document.getElementById("02").style.display = 'block';
}
function Nascondi1(){
document.getElementById("02").style.display = 'none';
}



function Vedi2(){
document.getElementById("03").style.display = 'block';
}
function Nascondi2(){
document.getElementById("03").style.display = 'none';
}



function Vedi3(){
document.getElementById("04").style.display = 'block';
}
function Nascondi3(){
document.getElementById("04").style.display = 'none';
}


function Vedi4(){
document.getElementById("05").style.display = 'block';
}
function Nascondi4(){
document.getElementById("05").style.display = 'none';
}



</script>
<table width="800" height="75" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="72">&nbsp;</td>
    <td width="72" align="center"><a href="#" onmouseover="Vedi()" onmouseout="Nascondi()"><img src="image/menu_home.png" width="48" height="48" /></a></td>
    <td width="72" align="center"><div  id="01" style="display:none">home</div></td>
    <td width="72" align="center"><a href="#" onmouseover="Vedi1()" onmouseout="Nascondi1()"><img src="image/menu_elenco.png" width="48" height="48" /></a></td>
    <td width="72" align="center"><div  id="02" style="display:none">elenco</div></td>
    <td width="72" align="center"><a href="#" onmouseover="Vedi2()" onmouseout="Nascondi2()"><img src="image/menu_album.png" width="48" height="48" /></a></td>
    <td width="72" align="center"><div  id="03" style="display:none">album</div></td>
    <td width="72" align="center"><a href="#" onmouseover="Vedi3()" onmouseout="Nascondi3()"><img src="image/menu_forum.png" width="48" height="48" /></a></td>
    <td width="72" align="center"><div  id="04" style="display:none">forum</div></td>
    <td width="72" align="center"><a href="#" onmouseover="Vedi4()" onmouseout="Nascondi4()"><img src="image/menu_login1.png" width="48" height="48" /></a></td>
    <td width="72"><div  id="05" style="display:none">login</div></td>
  </tr>
</table> 

e funge bene, volevo chiedere se si può ottimizzare il codice però...

inoltre, su firefox, le immagini compaiono in quadrati blu... xke???

[sevenjeak]

Perchè firefox mette come bordo all'immagine il colore del link ( se visitat, se non visitato, ecc..) dovresti inserire nel tag img l'attributo border a 0.

Perché non ottimizzare il tuo codice riscrivendolo in questo modo:

<script type="text/javascript"> 
function Vedi(id)
{ 
   document.getElementById(id).style.display = 'block'; 
} 

function Nascondi(id)
{ 
   document.getElementById(id).style.display = 'none'; 
}
</script> 
<table width="800" height="75" border="0" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td width="72">&nbsp;</td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('01')" onmouseout="Nascondi('01')"><img src="image/menu_home.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="01" style="display:none">home</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('02')" onmouseout="Nascondi('02)"><img src="image/menu_elenco.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="02" style="display:none">elenco</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('03')" onmouseout="Nascondi('03')"><img src="image/menu_album.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="03" style="display:none">album</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('04')" onmouseout="Nascondi('04')"><img src="image/menu_forum.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="04" style="display:none">forum</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('05')" onmouseout="Nascondi('05')"><img src="image/menu_login1.png" width="48" height="48" /></a></td> 
    <td width="72"><div  id="05" style="display:none">login</div></td> 
  </tr> 
</table>  

P.S.: Una piccola correzione... hai scritto: "io ho questa tabella con un pezzetto di java", volevi per caso scrivere "io ho questa tabella con un pezzetto di javascript", ricorda che java e javascript sono due cose completamente diverse

grazie mille!

Perchè firefox mette come bordo all'immagine il colore del link ( se visitat, se non visitato, ecc..) dovresti inserire nel tag img l'attributo border a 0.

Perché non ottimizzare il tuo codice riscrivendolo in questo modo:

<script type="text/javascript"> 
function Vedi(id)
{ 
   document.getElementById(id).style.display = 'block'; 
} 

function Nascondi(id)
{ 
   document.getElementById(id).style.display = 'none'; 
}
</script> 
<table width="800" height="75" border="0" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td width="72">&nbsp;</td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('01')" onmouseout="Nascondi('01')"><img src="image/menu_home.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="01" style="display:none">home</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('02')" onmouseout="Nascondi('02)"><img src="image/menu_elenco.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="02" style="display:none">elenco</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('03')" onmouseout="Nascondi('03')"><img src="image/menu_album.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="03" style="display:none">album</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('04')" onmouseout="Nascondi('04')"><img src="image/menu_forum.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="04" style="display:none">forum</div></td> 
    <td width="72" align="center"><a href="#" onmouseover="Vedi('05')" onmouseout="Nascondi('05')"><img src="image/menu_login1.png" width="48" height="48" /></a></td> 
    <td width="72"><div  id="05" style="display:none">login</div></td> 
  </tr> 
</table>  

P.S.: Una piccola correzione... hai scritto: "io ho questa tabella con un pezzetto di java", volevi per caso scrivere "io ho questa tabella con un pezzetto di javascript", ricorda che java e javascript sono due cose completamente diverse

ciao...
dopo un po di tempo, volevo ottimizzare ancora di piu questo codice...
o meglio, volevo aggiungere una funzione: che al passaggio del mouse, oltre che far comparire la scritta, volevo che venisse cambiata l'immagine... è possibile?

spiego meglio io ho:

    <td width="72" align="center"><a href="#" onmouseover="Vedi('01')" onmouseout="Nascondi('01')"><img src="image/menu_home.png" width="48" height="48" /></a></td> 
    <td width="72" align="center"><div  id="01" style="display:none">home</div></td>

al passaggio del mouse l'immagine image/menu_home.png deve diventare image/menu_home_2.png

come posso fare?