Questo script consente di evidenziare le celle di una tabella modificandone il colore al passaggio del mouse e ripristinando il colore originario quando il mouse viene spostato nuovamente. Si rivela utile per facilitare la lettura su tabelle molto lunghe, magari con testo molto piccolo, ma può essere adottato anche per un menu con effetto rollover. Dal punto di vista implementativo, è un esempio di interazione tra Javascript e CSS.
- esempio.htm
## 1: LA SEZIONE CSS
Per la realizzazione dell'effetto abbiamo bisogno di creare due classi CSS. Con queste classi definiamo, rispettivamente, il colore di sfondo di base e quello che apparirà al passaggio del mouse. Sono regole estremante semplici e facilmente personalizzabili. Vanno definite all'interno della sezione <head></head>:
<style type="text/css">
.normale {background: #CCC}
.selezionata {background: #FF99CC;}
</style>
## 2: LA PARTE JAVASCRIPT
La sezione Javascript non è composta da complicate funzioni, ma da semplici istruzioni poste a livello dei tag <td> (le celle della tebella). In pratica, ogni elemento <td>, dovrà avere questa forma:
Per prima cosa si assegna all'elemento la classe 'normalè con cui si definisce il colore di sfondo primario. Quindi, si imposta un evento onmouseover. Al passaggio del mouse sulla cella, cambieremo il nome della classe da 'normalè a 'selezionatà. Automaticamente cambieremo il colore di sfondo. Per riportare il colore allo stato iniziale, abbiamo però bisogno di un evento onmouseout: quando il cursore esce dalla cella, reimpostiamo la classe su 'normalè. Attenzione all'uso di apici doppi, singoli e punto e virgola. Tutto qui, semplice ed efficace!
