Elenchi di facile lettura con colori alternati ed effetto mouseover
In questo semplice articolo vedremo come creare degli elenchi che siano facilmente leggibili per l'utente.
Per fare ciò faremo ricorso a due semplici espedienti:
- colori alternati per le varie righe dell'elenco;
- evidenziatore della riga selezionata al passaggio del mouse.
Per realizzare il nostro elenco abbiamo utilizzato una semplice tabella HTML, poche istruzioni CSS ed un pizzico di DHTML per dinamizzare il tutto. Ma andiamo per gradi.
Partiamo dai CSS e vediamo di seguito il contenuto del nostro foglio di stile:
table.tbElenco
{
border: 1px solid #808080;
font-family: verdana, arial, tahoma;
font-size: 10px;
color: #000000;
}
table.tbElenco th
{
background: #808080;
color: #FFFFFF;
font-weight: bold;
}
table.tbElenco td
{
border-bottom: 1px solid #CCCCCC;
}
table.tbElenco tr.normale
{
background: #FFFFFF;
}
table.tbElenco tr.alternata
{
background: #EEEEEE;
}
table.tbElenco tr.evidenziata
{
background: #FFFF00;
}
Quello che abbiamo fatto è molto semplice: per prima cosa abbiamo stilizzato la tabella nel suo complesso assegnandole una classe ('tbElenco'), dopodichè abbiamo stilizzato i suoi elementi <th> e <td>, infine abbiamo creato tre diverse classi corrispondenti ai tre diversi status delle nostre righe: normale, alternata ed evidenziata.
Vediamo di seguito il codice della nostra tabella:
<table cellspacing="0" cellpadding="2" class="tbElenco"> <tr> <th>Prodotto</th> <th>Q.ta</th> <th>Prezzo</th> </tr> <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'"> <td>Macchina Fotografica</td> <td>3</td> <td>100,00 Euro</td> </tr> <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'"> <td>Telefonino</td> <td>2</td> <td>150,00 Euro</td> </tr> <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'"> <td>TV LCD 20 pollici</td> <td>1</td> <td>220,00 Euro</td> </tr> <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'"> <td>Lettore MP3</td> <td>1</td> <td>60,00 Euro</td> </tr> <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'"> <td>Lettore DVD</td> <td>1</td> <td>80,00 Euro</td> </tr> <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'"> <td>Console Videogames</td> <td>1</td> <td>200,00 Euro</td> </tr> <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'"> <td>Navigatore GPS</td> <td>7</td> <td>140,00 Euro</td> </tr> <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'"> <td>Videocamera Mini-DVD</td> <td>1</td> <td>270,00 Euro</td> </tr> </table>Come avrete notato si tratta di una banalissima tabella HTML dove abbiamo avuto cura di assegnare alternativamente alle diverse righe (<tr>) le classi 'normale' e 'alternata'.
Per dinamizzare l'aspetto della riga al passaggio del mouse abbiamo associato all'elemento riga (<tr>) gli eventi onmouseover e onmouseout che prevedono rispettivamente l'assegnazione dinamica della classe 'evidenziata' al momento del passaggio del mouse ed il ritorno alla classe di partenza nel momento in cui il mouse esce dalla riga.
