Creiamo un foglio di stile tipo stile.css con questo contenuto:
/* Foglio di stile "stile.css" per higlight al passaggio del mouse */
tr.highLight {
background: Highlight;
color: HighlightText;
}
tr.normale {
background : #FFFFFF;
}
Nella pagina HTML dobbiamo linkare il foglio di stile nella sezione <head> della pagina per poter poi utilizzare gli stili specificati.
Questa l’istruzione per il link del foglio di stile:
<link href="/stile.css" rel="stylesheet" type="text/css">
Attenzione ad inserire il link al foglio di stile il percorso assoluto del foglio di stile, nel caso in cui il webserver non sia in grado di trovare il file del foglio di stile, nella pagina i riferimenti agli stili verranno ingorati.
Per far in modo che al passaggio del mouse cambi colore l’intera riga ed il relativo testo, dobbiamo utilizzare degli eventi:
– onMouseOver che indica il passaggio del mouse
– onMouseOut che indica l’uscita del mouse dalla riga
Basterà quindi indicare al browser che quando in mouse è sopra alla riga (Over) la classe della riga cambia con "highlight", mentre quando il mouse è fuori dalla riga la classe della riga stessa è "normale", per risolvere questa procedura basta utilizzare dei javascript che assegnano all’oggetto riga la classe desiderata:
<!— Esempio di codice per highlight —>
<tr class="normale"
onMouseOver="this.className=’highLight’"
onMouseOut="this.className=’normale’">
<td>Col1 Riga1</td>
<td>Col2 Riga1</td>
</tr>
<tr class="normale"
onMouseOver="this.className=’highLight’"
onMouseOut="this.className=’normale’">
<td>Col1 Riga2</td>
<td>Col2 Riga2</td>
</tr>
Per cambiare la classe della riga ho utilizzato la proprietà classname dell’oggetto this, javascript intende per this l’oggetto cui si sta puntando sopra.
Conclusioni e considerazioni:
Pensandoci ho avuto la sensazione che sia possibile affettuare lo stesso effetto non solo per la riga ma anche per la cella specifica, basta riportare il tutto sul td anzichè sul tr, ho prova ed è vero, l’effetto non è molto entusiasmante, forse per un difetto di colori, magari con colori meno opposti diventa più gradevole.
Ovviamente dopo aver provato la cella ho provato anche la tabella intera, funziona ma è inutile dire che l’effetto è un pugno allo stomaco 🙂
Ho notato inoltre che a volte può essere molto lenta la lettura della tabella per intero, dipende dal computer, dal browser e dal numero di righe presenti nella tabella, infatti più righe ci sono peggio è, diventa di una lentezza epocale.]]>
