Λίστες εύκολο να διαβαστεί με ένα άλλο χρώμα και το αποτέλεσμα mouseover

Σε αυτό το άρθρο θα δούμε πώς μπορείτε να δημιουργήσετε απλές λίστες που είναι εύκολα αναγνώσιμη για το χρήστη.
Για να γίνει αυτό θα χρησιμοποιήσουμε δύο απλά μέτρα:

• εναλλασσόμενα χρώματα για διαφορετικές σειρές του καταλόγου?
• Επισημάνετε την επιλεγμένη γραμμή με mouseover.

Ας κάνουμε ένα παράδειγμα και να πω θα μπορούσαμε να δείξουμε στο χρήστη μια λίστα των προϊόντων που διατίθενται στο ηλεκτρονικό εμπόριο ιστοσελίδα μας. Κάτω από το αποτέλεσμα που θα πετύχουμε:

Όπως είναι φανερό η χρήση της εναλλαγής χρωμάτων για διαφορετικές γραμμές πιο εύκολο να διαβάσετε τις διάφορες καταχωρήσεις στη λίστα, ενώ το highlighter παρουσία του ποντικιού καθιστά ακόμη πιο άμεσα σχετικό με το θέμα γραμμή του ενδιαφέροντός μας.

Για να κάνετε λίστα μας, χρησιμοποιήσαμε ένα απλό πίνακα HTML, μερικές οδηγίες και ένα κομμάτι του CSS DHTML για να την ενδυναμώσει. Αλλά ας βαθμούς.

Ας ξεκινήσουμε με τα CSS και να δούμε κάτω από το περιεχόμενο του φύλλου στυλ μας:

 table.tbElenco







 {



  



 σύνορα: 1px solid # 808080?



  



 font-family: Verdana, Arial, Tahoma?



  



 font-size: 10px?



  



 χρώμα: # 000000?







 }







 table.tbElenco ου







 {



  



 υπόβαθρο: # 808080?



  



 χρώμα: # FFFFFF?



  



 font-weight: τολμηρό?







 }







 table.tbElenco td







 {



  



 συνόρων κάτω: 1px solid # CCCCCC?







 }







 table.tbElenco tr.normale







 {



  



 υπόβαθρο: # FFFFFF?







 }







 table.tbElenco tr.alternata







 {



  



 υπόβαθρο: # EEEEEE?







 }







 table.tbElenco tr.evidenziata







 {



  



 υπόβαθρο: # FFFF00?







 }

Αυτό που κάναμε είναι πολύ απλή: πρώτα τυποποιημένο πίνακα με την ανάθεση μια τάξη στο σύνολό της («tbElenco»), τότε θα στυλιζαρισμένο και <td> <th> σύνολό του, τότε έχουμε δημιουργήσει τρεις διαφορετικές κατηγορίες που αντιστοιχούν στις τρεις Κατάσταση των διαφορετικών γραμμών μας: κανονική, εναλλακτική και τονίζονται.

Ας ακολουθήσουμε τον κώδικα του πίνακα μας:

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







 <tr>







 <th> Προϊόν </ th>







 <th> Ποσότητα </ th>







 <th> τιμή </ th>







 </ Tr>







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







 <td> κάμερας </ td>







 <td> 3 </ td>







 <td> 100,00 ευρώ </ td>







 </ Tr>







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







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 ευρώ </ td>







 </ Tr>







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







 <td> 20-ιντσών LCD τηλεόραση </ 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 Ευρώ </ td>







 </ Tr>







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







 <td> DVD player </ td>







 <td> 1 </ td>







 <td> 80.00 Ευρώ </ td>







 </ Tr>







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







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







 Μίνι-βιντεοκάμερα DVD <td> </ td>







 <td> 1 </ td>







 <td> 270,00 ευρώ </ td>







 </ Tr>







 </ Table>

Όπως μπορείτε να δείτε ότι είναι ένα ασήμαντο πίνακα HTML, όπου φρόντισε να αναθέσει είτε με τις διάφορες γραμμές (<tr>) τάξεις «κανονική» και «AC».

Για να τονώσει την εμφάνιση της γραμμής στη γραμμή ποντίκι που συνδέουμε τα γεγονότα στοιχείο (<tr>) onmouseover και onMouseOut τα οποία παρέχουν, αντίστοιχα, τη δυναμική εκχώρηση »τονίζουν« η τάξη όταν περνάτε και την επιστροφή στην τάξη εκκίνηση όταν το ποντίκι φεύγει τη γραμμή.