Alternatif renk ve mouseover etkisi ile okunması kolay Listesi

Bu yazıda kullanıcının kolayca okunabilir basit listeleri oluşturmak için nasıl göreceksiniz.
Bunun için iki basit önlemler kullanacağız:

• Listenin farklı satırlar için alternatif renkler;
• Mouseover seçili satır vurgulayın.

Bir örnek yapmak ve kullanıcı e-ticaret sitesi mevcut ürünlerin listesi gösterilebilir diyelim. Sonuç Aşağıda ki elde edersiniz:

Gibi fare varlığı vurgulayıcı bizim ilgi konu satırına daha da hemen alakalı kılar ise, listede çeşitli girdileri okumak için farklı hatları için alternatif renk belirgin kullanımı daha kolaydır.

Listemize yapmak için, onu canlandırmak için basit bir HTML tablosunda, birkaç talimat ve CSS DHTML bir parça kullanılmış. Ama diyelim derece.

CSS ile başlar ve stil sayfasının içeriğini aşağıda görelim:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 background: # 808080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: # CCCCCC solid 1px;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # eeeeee;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

Biz de bunu yaptık çok basittir: o zaman stilize ve bütünüyle <th> <td> bir bütün ('tbElenco') olarak bir sınıf, atayarak öncelikle stilize tablo, o zaman üç karşılık gelen üç farklı sınıflar oluşturduk Çeşitli satır Durum: normal, alternatif ve vurgulanır.

Bizim tablonun kod takip edelim:

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







 <tr>







 <th> Ürün </ th>







 <th> Miktar </ th>







 <th> Fiyat </ 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> Mobil </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ Tr>







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







 <td> 20 inç 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 Çalar </ td>







 <td> 1 </ td>







 <td> 60.00 Euro </ td>







 </ Tr>







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







 <td> DVD oynatıcı </ td>







 <td> 1 </ td>







 <td> 80.00 Euro </ td>







 </ Tr>







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







 <td> Konsol Oyunları </ 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 Video Kamera <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Euro </ td>







 </ Tr>







 </ Masa>

Gördüğünüz gibi biz (<tr>) sınıfları 'normal' ve 'AC' farklı çizgileri ya atamak için özen önemsiz bir HTML tablosu vardır.

Mouse on line sıra görünümünü teşvik etmek size hover ve sınıf döndüğünüzde sırasıyla sınıf 'vurgulayın' dinamik atama sağlayan eleman (<tr>) onmouseover ve onmouseout olayları ilişkilendirmek fare satır çıktığında başlar.