Zoznamy ľahko čitateľné s rôznymi farbami a mouseover efekt

V tomto článku sa budeme vidieť, ako vytvoriť jednoduché zoznamy, ktoré sú ľahko čitateľné pre používateľa.
K tomu budeme používať dva jednoduché opatrenia:

• striedanie farieb v rôznych riadkoch zoznamu;
• Zvýraznenie vybraného riadku v bublinové nápovede.

Urobme príklad a že by sme mohli ukázať užívateľovi zoznam produktov nájdete v našom e-commerce mieste. Pod tým výsledkom, že dosiahneme:

Ako je zrejmé použitie striedanie farieb na rôznych tratiach ľahšie čítať rôzne položky v zozname, zatiaľ čo prítomnosť zvýrazňovač na myši je ešte bezprostredne týkajú predmetu nášho záujmu.

Aby nášho zoznamu sme použili jednoduché tabuľke HTML, niekoľko inštrukcií a trochu CSS DHTML oživiť ho. Ale poďme stupňov.

Poďme začať s CSS a pozri nižšie obsah našich štýlov:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 Farba: # 000000;







 }







 table.tbElenco ročník







 {



  



 pozadia: # 808080;



  



 Farba: # FFFFFF;



  



 font-váha: tučný;







 }







 table.tbElenco TD







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 pozadia: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 pozadia: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 pozadia: # FFFF00;







 }

Čo sme urobili, je veľmi jednoduchý: najprv sme sa štylizovanou tabuľky priradením triedy ako celku ("tbElenco"), potom štylizovaný a <td> <th> celom rozsahu, potom sme vytvorili tri rôzne triedy zodpovedajúce trom stav našich rôznych smerov: normálne, alternatívne a zvýrazní.

Poďme sledovať kód nášho stola:

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







 <tr>







 <th> produktu </ th>







 <th> Množstvo </ th>







 <th> Cena </ th>







 </ Tr>







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







 <td> kamery </ td>







 <td> 3 </ td>







 <td> 100,00 Sk </ td>







 </ Tr>







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







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Sk </ td>







 </ Tr>







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







 <td> 20-palcový LCD TV </ td>







 <td> 1 </ td>







 <td> 220,00 Sk </ td>







 </ Tr>







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







 <td> MP3 prehrávač </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD prehrávač </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> konzoly hry </ td>







 <td> 1 </ td>







 <td> 200,00 Sk </ td>







 </ Tr>







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







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 Sk </ td>







 </ Tr>







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







 Mini-DVD videokamery <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Sk </ td>







 </ Tr>







 </ TABLE>

Ako môžete vidieť, že je triviálne HTML tabuľku, kde sa staral priradiť buď do rôznych smerov (<tr>) triedy "normálne" a "AC".

Pre podporu vzniku rady na myši linky priradíme prvku (<tr>) onmouseover a onmouseout udalosti, ktoré poskytujú, respektíve dynamické prideľovanie triedy "zvýraznenie", keď podržíte a vrátiť sa do triedy začiatku, keď sa myš opustí radu.