Llistes fàcils de llegir en un color alternatiu i efectes mouseover

En aquest article anem a veure com crear llistes simples que siguin fàcilment llegibles per l'usuari.
Per a això utilitzarem dues mesures senzilles:

• colors alterns de les diferents files de la llista;
• ressaltar la fila seleccionada en mouseover.

Anem a fer un exemple i que podíem mostrar a l'usuari una llista de productes disponibles en el nostre lloc de comerç electrònic. Arran del resultat que aconseguirem:

Com és evident l'ús de l'alternança de colors per a les diferents línies fàcil de llegir els diferents epígrafs de la llista, mentre que el marcador de la presència del ratolí fa que sigui encara més immediat objecte del nostre interès en la línia corresponent.

Per fer la llista, es va utilitzar una taula d'HTML senzill, unes instruccions i un pessic de CSS DHTML per dinamitzar el conjunt. Però anem a anar pas a pas.

Anem a començar amb la CSS i veure a continuació el contingut de la nostra full d'estil:

 table.tbElenco







 {



  



 border: 1px solid # 808.080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco ª







 {



  



 fons: # 808.080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 fons: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 fons: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 fons: # ffff00;







 }

El que vam fer és molt simple: primer estilitzada de la taula en el seu conjunt mitjançant l'assignació d'una classe ('tbElenco'), llavors tenim estilitzada i <td> <th> la seva totalitat, llavors hem creat tres classes diferents, corresponents als tres Les nostres línies de diferents estats: normal, va destacar continu i altern.

Seguirem el codi de la nostra taula:

 <table cellspacing="0" cellpadding="2" class="tbElenco">







 <tr>







 <th> producte </ th>







 Quantitat <th> </ th>







 <th> Preu </ th>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> Cambra </ td>







 <td> 3 </ td>







 <td> 100,00 € </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> mòbil </ td>







 <td> 2 </ td>







 <td> 150,00 € </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> de 20 polzades LCD TV </ td>







 <td> 1 </ td>







 <td> 220,00 € </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> MP3 Player </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> reproductor de DVD </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Consola de jocs </ td>







 <td> 1 </ td>







 <td> 200,00 € </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 € </ td>







 </ Tr>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 Mini-DVD Camcorder <td> </ td>







 <td> 1 </ td>







 <td> 270,00 € </ td>







 </ Tr>







 </ Table>

Com es pot veure que és una taula HTML trivial en el qual s'han encarregat d'assignar alternativament a les diferents línies (<tr>) classes de 'normal' i 'AC'.

Per augmentar l'aparença de la fila en la línia de ratolins que associat amb l'element (<tr>) esdeveniments onMouseOver i onmouseout que proporcionen, respectivament, l'assignació dinàmica de 'highlight' de la classe del ratolí durant la transició i el retorn a classes comença quan el ratolí surt de la fila.