Seznamy snadno čitelné s různými barvami a mouseover efekt

V tomto článku se budeme vidět, jak vytvořit jednoduché seznamy, které jsou snadno čitelné pro uživatele.
K tomu budeme používat dva jednoduché opatření:

• střídání barev v různých řádcích seznamu;
• Zvýraznění vybraného řádku v bublinové nápovědě.

Udělejme příklad a že bychom mohli ukázat uživateli seznam produktů naleznete v našem e-commerce místě. Pod tím výsledkem, že dosáhneme:

Jak je patrné použití střídání barev na různých tratích snadnější číst různé položky v seznamu, zatímco přítomnost zvýrazňovač na myši je ještě bezprostředně týkají předmětu našeho zájmu.

Aby našeho seznamu jsme použili jednoduché tabulce HTML, několik instrukcí a trochu CSS DHTML oživit ho. Ale pojďme stupňů.

Pojďme začít s CSS a viz níže obsah našich stylů:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 Barva: # 000000;







 }







 table.tbElenco ročník







 {



  



 pozadí: # 808080;



  



 Barva: # FFFFFF;



  



 font-váha: tučný;







 }







 table.tbElenco TD







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 pozadí: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 pozadí: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 pozadí: # FFFF00;







 }

Co jsme udělali, je velmi jednoduchý: nejprve jsme se stylizovanou tabulky přiřazením třídy jako celku ("tbElenco"), pak stylizovaný a <td> <th> celém rozsahu, pak jsme vytvořili tři různé třídy odpovídající třem Stav našich různých směrů: normální, alternativní a zvýrazní.

Pojďme sledovat kód našeho stolu:

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







 <tr>







 <th> produktu </ th>







 <th> Množství </ 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 Kč </ td>







 </ Tr>







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







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Kč </ 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 Kč </ td>







 </ Tr>







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







 <td> MP3 přehrávač </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ Tr>







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







 <td> DVD přehrávač </ td>







 <td> 1 </ td>







 <td> 80,00 Euro </ td>







 </ Tr>







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







 <td> konzole hry </ td>







 <td> 1 </ td>







 <td> 200,00 Kč </ td>







 </ Tr>







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







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 Kč </ td>







 </ Tr>







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







 Mini-DVD videokamery <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Kč </ td>







 </ Tr>







 </ TABLE>

Jak můžete vidět, že je triviální HTML tabulku, kde se staral přiřadit buď do různých směrů (<tr>) třídy "normální" a "AC".

Pro podporu vzniku řady na myši linky přiřadíme prvku (<tr>) onmouseover a onmouseout události, které poskytují, respektive dynamické přidělování třídy "zvýraznění", když podržíte a vrátit se do třídy začátku, když se myš opustí řady.