Lijsten gemakkelijk af te lezen in een andere kleur en de mouseover effect

In dit artikel zullen we zien hoe u eenvoudige lijsten die gemakkelijk leesbaar zijn voor de gebruiker te creëren.
Om dit te doen zullen we gebruik maken van twee eenvoudige maatregelen:

• afwisselende kleuren voor de verschillende rijen van de lijst;
• Markeer de geselecteerde rij op mouseover.

Laten we een voorbeeld en zeggen dat we konden de gebruiker een lijst van producten die beschikbaar zijn in onze e-commerce site te tonen. Hieronder het resultaat dat we bereiken:

Zoals blijkt het gebruik van afwisselende kleuren voor de verschillende lijnen makkelijker om de verschillende vermeldingen in de lijst te lezen, terwijl de aanwezigheid highlighter op de muis maakt het nog meer onmiddellijke relevantie voor het onderwerp van onze interesse.

Om onze lijst, gebruikten we een eenvoudige HTML-tabel, een paar instructies en een beetje van CSS DHTML om het te versterken. Maar laten we graden.

Laten we beginnen met de CSS en zie hieronder de inhoud van onze style sheet:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco e







 {



  



 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;







 }

Wat we deden is heel simpel: we eerst gestileerd de tafel door het toewijzen van een klasse als een geheel ("tbElenco '), dan kunnen we gestileerde en <td> <th> haar geheel, dan hebben wij drie verschillende klassen die overeenkomen met de drie status van onze verschillende lijnen: normaal, afwisselend en gemarkeerd.

Laten we de code van onze tafel te volgen:

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







 <tr>







 <th> Product </ th>







 <th> Aantal </ th>







 <th> Prijs </ th>







 </ Tr>







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







 <td> Camera </ 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-inch 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-speler </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD-speler </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> Console Games </ 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 Camcorder <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Euro </ td>







 </ Tr>







 </ Table>

Zoals je kunt zien is het een triviale HTML tafel, waar we met zorg om ofwel toe te wijzen aan de verschillende lijnen (<tr>) klassen 'normaal' en 'AC'.

Ter stimulering van het uiterlijk van de rij op de muis lijn die we associëren het element (<tr>) onmouseover en onmouseout gebeurtenissen die van respectievelijk de dynamische toewijzing van 'highlight' de klas als je zweven en terug te keren naar de klas starten wanneer de muis verlaat de rij.