colorare la tabella o cella passandoci con il mouse sopra

[Tr|k`Tr4k]

ho questa tabella:

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>ciao</td>
</tr>
</table>

vorrei far colorare per esempio di giallo la cella dove c'e' il testo "ciao" quando ci passo sopra con il mouse.

Come posso fare???

[Diurno]

usa la ricerca del sito

onmouseover="this.style.background='#COLORE CHE VUOI'" onmouseout="this.style.background='#COLORE CHE VUOI'"

[kaze]

Oppure usi javascript :
http://www.dynamicdrive.com/dynamici...lighttable.htm

[pierofix]

Prima di pensare a javascript io mi butterei su CSS, ovvero il linguaggio appropriato per la gestione della grafica di un documento. Partirei, dunque, da questo:

td:hover { background-color:#ccc }

Visto che la pseudo-classe hover applicata ad elementi diversi dai link ipertestuali è supportata solo dai browser seri, allora occorre fare qualcosa anche per il caca-browser IE.

Anche qui, piuttosto che sporcare il markup con tutto quel codice javascript, proverei a sfruttare un connubio tra CSS e js stesso, con la tecnica dell'attribuzione delle classi.

Javascript

function sopra(id) {
   document.getElementById(id).className = ".sopra"
}
function fuori(id) {
   document.getElementById(id).className = ".sopra"
}

CSS

td:hover,
.sopra { background-color:#ccc }

XHTML

<td id="prodotto" onmouseover="sopra('prodotto')" onmouseout="fuori('prodotto')">
   Contenuto della cella.
</td>

Ora, la soluzione con l'utilizzo degli id fa davvero schifo, lo riconosco. C'è qualche espertone (nuuuuky?!? ) che mi modifica la funzione sfruttando this?

Grazie.

[nuky]

Originariamente inviato da pierofix
Ora, la soluzione con l'utilizzo degli id fa davvero schifo, lo riconosco. C'è qualche espertone (nuuuuky?!? ) che mi modifica la funzione sfruttando this?

Grazie.

Espertone!
:maLOL:
No che non ho tempo.

Non ci va il punto, ma solo il nome della classe.

Javascript

function sopra(objTd) {
   objTd.className = "sopra";
}
function fuori(objTd) {
   objTd.className = "fuori";
}

E il css fuori?

CSS
TD.fuori { background-color:#123}

td:hover,
.sopra { background-color:#ccc}

XHTML

<td id="prodotto" onmouseover="sopra(this)" onmouseout="fuori(this)">
   Contenuto della cella.
</td>

Diciamo che a me non piace molto fare funzioni con una istruzione, in questo caso metterei l'istruzione direttamente inline nel tag.
Poi vabè ci sono molti modi per farlo, questo è uno.

[pierofix]

Sì, scusa, il punto è stata una svista mia. :rollo:

Pensavo ad una cosa, però: per farlo funzionare occorrerebbe specificare gli eventi per OGNI cella di tabella. Checchifo! Non c'è un modo per dire - in javascript - che ogni volta che si passa su una qualsiasi cella avvenga il cambio di classe?

[nuky]

Con questa funzione chiamata sull'onload della pagina:

function Assegna() {
  var t1 = document.getElementById("t1");
  for (var i=0; i<t1.rows.length; i++) {
    for (var j=0; j<t1.rows(i).cells.length; j++) {
      t1.rows(i).cells(j).onmouseover = function sopra() {this.className='sopra';}
      t1.rows(i).cells(j).onmouseout = function fuori() {this.className='fuori';}
    }
  }
}

La tabella è fissa, volendo la tabella la si può passare come parametro, oppure lo si può fare per tutte le tabelle aggiungendo un ciclo esterno.

[Tr|k`Tr4k]

Originariamente inviato da Diurno
usa la ricerca del sito

onmouseover="this.style.background='#COLORE CHE VUOI'" onmouseout="this.style.background='#COLORE CHE VUOI'"

alla fine tra tutti gli esempi postati, ho usato questo.
me ne serviva uno rapido, senza css o javascript...
Grazie per l'aiuto!!

[nuky]

Originariamente inviato da Tr|k`Tr4k
alla fine tra tutti gli esempi postati, ho usato questo.
me ne serviva uno rapido, senza css o javascript...
Grazie per l'aiuto!!

:rollo: Quelle due righe servono per variare il css tramite javascript.

E' la soluzione che ti abbiamo scritto, ma senza appoggiarsi ad una funzione.

[pierofix]

Se te ne serviva uno rapido, allora quello che ti abbiamo proposto era l'ideale:

1. non inquini il markup di ogni cella con attributi di evento, rendendo quindi il documento molto più leggero, veloce e pulito;
   
2. se dovessi cambiare, ad esempio, il colore che applichi come sfondo, ti basterebbe farlo nel CSS e non andare a modificare ogni singolo valore di attributo;
   
3. puoi apportare tutte le modifiche che vuoi alla tabella: aggiungere righe, togliere celle, spostare dati, tutto senza pensare alla presentazione, sempre garantita da una funzione esterna al markup;
   
4. ti accosti di più ai nuovi standard di javascript che, se non erro, non vedono di buon occhio la gestione degli stili tramite questo linguaggio: l'attribuzione delle classi sopperisce a questa limitazione (giusta, a mio avviso) e ti aiuta a mantenere più ordine e separazione tra linguaggi, dando ad ognuno di questi il giusto spazio e le giuste competenze.