tabella che cambia colore con il passare del mouse

Ciao... qui sotto tutte le immagini ci sono dei bottoni (piccole tabelle) 1 , 2, 3, 4 ...
Comme faccio a far cambiare il colore di quelle tabelle con il passare del mouse ???

Ecco il codice di una:

Codice HTML:

<a href="http://bboys.altervista.org/Categorie/Animali/Animali.html#qui"><table width="33" border="1" bgcolor=#336699 bordercolor=#CCCCCC><td><center><font color="white"><b>1</b></font></center></td></table></a>

Questo funziona solo con il browser Google Chrome:

Codice HTML:

<a href="http://bboys.altervista.org/Categorie/Animali/Animali.html"><table width="33" border="1" bordercolor=#CCCCCC bgcolor=#336699 ><tr onmouseover="this.style.background='#333399'" onmouseout="this.style.background='#336699'"><td><center><font color="white"><b>1</b></font></center></td></tr></table></a>

io lo farei così

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> .pop { text-align: center; clear: both; } .pop a:link, .pop a:visited { border: 1px solid #333399; background-color: #336699; color: #FFF; text-decoration: none; margin-right: .3em; margin-left: .3em; padding: .2em .6em; } .pop a:hover { background-color: #333399; } </style> </head> <body> <p class="pop"> <a href="http://bboys.altervista.org/Categorie/Animali/Animali.html">1</a> <a href="http://bboys.altervista.org/Categorie/Animali/Animali2.html">2</a> <a href="http://bboys.altervista.org/Categorie/Animali/Animali3.html">3</a> <a href="http://bboys.altervista.org/Categorie/Animali/Animali4.html">4</a> </p> </body> </html>

Citazione:

Originalmente inviato da acsocmel

io lo farei così

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> .pop { text-align: center; clear: both; } .pop a:link, .pop a:visited { border: 1px solid #333399; background-color: #336699; color: #FFF; text-decoration: none; margin-right: .3em; margin-left: .3em; padding: .2em .6em; } .pop a:hover { background-color: #333399; } </style> </head> <body> <p class="pop"> <a href="http://bboys.altervista.org/Categorie/Animali/Animali.html">1</a> <a href="http://bboys.altervista.org/Categorie/Animali/Animali2.html">2</a> <a href="http://bboys.altervista.org/Categorie/Animali/Animali3.html">3</a> <a href="http://bboys.altervista.org/Categorie/Animali/Animali4.html">4</a> </p> </body> </html>

perfetto ... è quasi quello che volevo, ma va benissimo anche questo :razz:

Ma adesso è possibile ridurre un pò lo spazio tra queste tabelle ???

dai uno sguardo a
http://acsocmel.altervista.org/test/bboys1.html :)

Citazione:

Originalmente inviato da acsocmel

dai uno sguardo a
http://acsocmel.altervista.org/test/bboys1.html :)

ma non è meglio così ? http://bboys.altervista.org/Categori...imali.html#qui
però mi sembra che sarebbe meglio togliere quelli bordi dalle icone di immagini ... o no?