Lister lett å lese med en annen farge og mouseover

I denne artikkelen vil vi se hvordan å lage enkle lister som er lett leselig for brukeren.
For å gjøre dette vil vi bruke to enkle tiltak:

• vekslende farger for forskjellige radene av listen;
• Uthev den valgte raden på mouseover.

La oss ta et eksempel og si at vi kunne vise brukeren en liste over produkter tilgjengelig i vår nettbutikk. Under det resultat at vi skal oppnå:

Som det fremgår bruken av vekslende farger for forskjellige linjer lettere å lese de ulike oppføringene i listen, mens tilstedeværelse merkepenn på musen gjør det enda mer umiddelbart relevant til emnet linje av vår interesse.

For å gjøre vår liste, brukte vi en enkel HTML-tabell, noen instruksjoner og litt CSS DHTML for å styrke den. Men la oss grader.

La oss starte med CSS og se under innholdet på våre style sheet:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 Bakgrunn: # 808080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 bakgrunn: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 bakgrunn: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 bakgrunn: # FFFF00;







 }

Hva vi gjorde er veldig enkel: vi først stiliserte bordet ved å tildele en klasse som helhet ("tbElenco '), så vi stiliserte og <td> <th> sin helhet, så har vi opprettet tre ulike klasser tilsvarende de tre Status for våre ulike linjer: normal, alternative og uthevet.

La oss følge de etiske tabellen vår:

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







 <tr>







 <th> Produkt </ th>







 <th> Antall </ th>







 <th> pris </ th>







 </ Tr>







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







 <td> Kamera </ td>







 <td> 3 </ td>







 <td> 100,00 Euro </ td>







 </ Tr>







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







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ Tr>







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







 <td> 20-tommers LCD-TV </ td>







 <td> 1 </ td>







 <td> 220,00 Euro </ td>







 </ Tr>







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







 <td> MP3 spiller </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD-spiller </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> Konsollspill </ td>







 <td> 1 </ td>







 <td> 200,00 Euro </ td>







 </ Tr>







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







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 Euro </ td>







 </ Tr>







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







 Mini-DVD-videokamera <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Euro </ td>







 </ Tr>







 </ Table>

Som du kan se det er en triviell HTML-tabell, der vi sørget for å tildele enten til forskjellige linjer (<tr>) klasser 'normal' og 'AC'.

For å stimulere utseendet på rad på musen linje vi knytte element (<tr>) onmouseover og onmouseout hendelser som gir henholdsvis dynamisk tildeling av klassen "høydepunkt" når du hover og gå tilbake til klassen start når musen forlater rad.