Cambiare colore di sfondo delle celle di una tabella

**rudyF** · 20-04-2006, 18:45

Ciao
Ho una tabella con il colore di sfondo rosso
Vorrei che al passaggio del mouse, lo sfondo delle singole celle cambiasse colore
Lo vorrei fare nello "Style"
Ho provato così:

td.over {background-color:#000000;}

Non va!
Come posso fare?
rudyF

**xxfuma85xx** · 21-04-2006, 08:39

le pseudoclassi :hover, :active, :focus, :link e :visited sono esclusivamente del tag <a>.
quindi ho usi un tag <a> in ogni <td> e gli metti un css tipo questo:

a{
display:block;
width:"larghezza";
height:"altezza";
margin:0;
padding:0;
border:0;
}

a:link, a:visited{
background:"colore normale";
}

a:hover, a:active, a:focus{
background:"colore hover";
}

oppure penso che con javascript ci sia qualche funzione che ti permette di cambiare lo stile ad un certo evento... e quindi di non usare il tag <a>...

spero di non aver sbagliato^^

ciau

**capsula** · 21-04-2006, 11:34

Devi usare i Javascript per far cambiare colore a a una cella al passaggio del mouse. Guarda un esempio.

[CODE]
<table border="1">
<tr>
<td onMouseOver="style.background='#008800';" onMouseOut="style.background='#FFFFFF';">

**capsula** · 21-04-2006, 11:56

Scusami prima stavo scrivendo, ho premuto qualcosa e mi ha inviato la risposta e non riesco a modificare. Ti scrivo tutto qua.

Dato che le pseudo-classi sono solo del tag <A> devi usare i javascript per poter cambiare colore di sfondo al passaggio del mouse.

Ti faccio due esempi:

Questo esempio è con i JavaScript in linea:

codice:

<table border="1">
<tr>
<td onMouseOver="style.background='#008800';"  onMouseOut="style.background='#FFFFFF';"> TESTO CELLA </td>
</tr>
</table>

Allora:
onMouseOver="style.background='#008800';" = al passaggio del mouse sopra la cella lo sfondo diventa verde
onMouseOut="style.background='#FFFFFF';" = all'uscita del mouse dalla cella o sfondo torna bianco

Questo secondo esempio è con le funzioni, dichiarate nella sezione Head tramite il tag delimitatore <Script>.

codice:

<head>
<script language="javascript">
	function cambia_sfondo (x)
	{ document.getElementById(x).style.background='#008800'; }

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

<body>
<table border="1">
<tr>
<td id="cella1" onMouseOver="cambia_sfondo('cella1')"  onMouseOut="torna_sfondo('cella1')"> TESTO CELLA </td>
</tr>
</table>
</body>

Allora:
<script language="javascript"> ==> tag script dove indichi il linguaggio utilizzato
function cambia_sfondo (x) ==> dichiari nome della funzione e i parametri che deve ricevere tra parentesi

{ document.getElementById(x).style.background='#0088 00'; }
Spiego pezzo per pezzo:
document. ==> in questo documento/cerca in questo documento
getElementById(x). ==> ottieni l'elemento con questo id (che passi tra parentesi)
style.background='#008800'; ==> ed applica ad esso (l'elemento ottenuto) questo codice. (cambio colore di sfondo in questo caso)

</script> ==> vabbè questo è ovvio!!!

id="cella1" = con questo secondo metodo devi assegnare un id agli elementi, poichè vengono identificati tramite id.
onMouseOver="cambia_sfondo('cella1')" = al passaggio del mouse sopra la cella richiama la funzione cambia_sfondo a cui passi l'id dell'elemento in cui andrà ad agire. Se invece di cella1 passavi cella5 il colore di sfondo che cambiare era quello dell'elemento id="cella5". (il colore di sfondo diventa verde)
onMouseOut="torna_sfondo('cella1')" = stesso procedimento, cambia il codice javascript eseguito (qui il colore di sfondo torna bianco)

Ecco qua. Spero di aver chiarito le idee!

Ciao

**salasir** · 21-04-2006, 12:06

Volevo solo fare una precisazione.
E' vero che le pseudoclassi :hover, ecc.. funzionano solo per il tag <a>, ma solo per IE :rollo:
Se provi a definire

codice:

    td:hover { background-color:#000000;}

(occhi ai due punti!) e lo visualizzi con FF o altri browser aderenti agli standard, funziona eccome.

**pierofix** · 21-04-2006, 13:19

Originariamente inviato da capsula
...

Meglio non mischiare CSS e Javascript in quel modo. Credo sia meglio usare il metodo dell'assegnazione delle classi:

codice:

XHTML
<td>Io sono un dato</td>
<td>Io sono un altro dato</td>



CSS
td:hover,
.cella_over
{
   background-color:#000;
}


Javascript
window.onload = function() {
   var celle = document.getElementsByTagName('td');

   for ( var i = 0; i < celle.length; i++ )
   {
      celle[i].onmouseover = function()
      {
         this.className = 'cella_over'
      }
      celle[i].onmouseout = function()
      {
         this.className = ''
      }
   }
}

Insomma, ogni strumento fa il suo dovere, senza interferire con il lavoro degli altri; il risultato è un codice più pulito, ordinato e funzionale.

**capsula** · 21-04-2006, 14:11

Ah boh io so quello del getElement By Id perchè così abbiamo fatto a scuola. Probabilmente ci sono altri metodo, forse migliori, io ho solo cercato did idre nel miglior modo possibile quello che sapevo.

**pierofix** · 21-04-2006, 14:17

Originariamente inviato da capsula
Ah boh io so quello del getElement By Id perchè così abbiamo fatto a scuola. Probabilmente ci sono altri metodo, forse migliori, io ho solo cercato did idre nel miglior modo possibile quello che sapevo.

getElementById è solo uno dei metodi del Document Object Model (DOM):

- www.w3.org/DOM/

La mia non era una critica a livello personale, intendiamoci. Ho solo detto che, utilizzando in maniera separata i vari linguaggi, è possibile giungere ad un codice più pulito ed essenziale.

Se noti, ad esempio, con la 'mia' soluzione si evita di inserire gli attributi di id e di evento onmouseover e onmouseout per OGNI cella, lasciando notevolmente più pulito il markup.

**capsula** · 21-04-2006, 14:44

Sisi tranquillo lo so che nn era una critica! Però sinceramente io non ho capito il tuo codice, se me lo spieghi mi fai un favore, poichè io a scuola ho imparato il mio e ho semore usto quello....
Ciao

**pierofix** · 21-04-2006, 14:56

Volentieri.

codice:

// Assicuriamoci che lo script divenga attivo
// solo dopo il completo caricamento della pagina
window.onload = function() {
   // Peschiamo TUTTI i tag 'td' presenti
   // nel documento e piazziamoli nella lista di nodi 'celle'
   var celle = document.getElementsByTagName('td');

   // Attiviamo un ciclo for per spostarci
   // all'interno della lista di nodi 'celle'
   for ( var i = 0; i < celle.length; i++ )
   {
      // Diciamo che, all'evento 'onmouseover'
      // del nodo di 'celle' in cui ci troviamo nel ciclo,
      // venga assegnata alla cella la classe 'cella_over'
      // già predisposta nel CSS
      celle[i].onmouseover = function()
      {
         this.className = 'cella_over'
      }
      // All'evento 'onmouseout' togliamo
      // la classe alla cella
      celle[i].onmouseout = function()
      {
         this.className = ''
      }
   }
}

Spero di essere stato chiaro.

P.S. Che scuola fai?

Discussione: Cambiare colore di sfondo delle celle di una tabella

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare colore di sfondo delle celle di una tabella

Permessi di invio