Listes facile à lire avec une couleur alternée et l'effet mouseover

Dans cet article nous allons voir comment créer des listes simples qui sont facilement lisibles pour l'utilisateur.
Pour ce faire nous allons utiliser deux mesures simples:

• alternant les couleurs pour les différentes lignes de la liste;
• Sélectionnez la ligne sélectionnée sur le mouseover.

Faisons un exemple et dire que nous pourrions montrer à l'utilisateur une liste de produits disponibles dans notre site e-commerce. Voici le résultat que nous obtiendrons:

Comme on le voit l'utilisation de couleurs alternées pour les lignes de différents facile à lire les différentes entrées dans la liste, tandis que le surligneur présence sur la souris rend encore plus immédiatement à la ligne d'objet de notre intérêt.

Pour faire notre liste, nous avons utilisé un tableau HTML simple, quelques instructions et un peu de CSS DHTML pour l'animer. Mais nous allons degrés.

Commençons avec le CSS et voir ci-dessous le contenu de notre feuille de style:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco ème







 {



  



 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;







 }

Qu'est-ce que nous avons fait est très simple: d'abord nous stylisés du tableau en attribuant une classe dans son ensemble («tbElenco '), puis nous avons stylisé et <td> <th> son intégralité, puis nous avons créé trois classes différentes correspondant aux trois Statut de nos différentes lignes: normal, suppléants et mis en évidence.

Suivons le code de notre table:

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







 <tr>







 <th> produit </ th>







 Qté <th> </ th>







 <th> Prix </ th>







 </ Tr>







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







 <td> caméra </ td>







 <td> 3 </ td>







 <td> 100,00 euros </ td>







 </ Tr>







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







 <td> Mobile </ td>







 <td> 2 </ td>







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







 </ Tr>







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







 <td> Lecteur MP3 </ td>







 <td> 1 </ td>







 <td> 60,00 euros </ td>







 </ Tr>







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







 <td> Lecteur DVD </ td>







 <td> 1 </ td>







 <td> 80,00 euros </ td>







 </ Tr>







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







 <td> Jeux Console </ td>







 <td> 1 </ td>







 <td> 200,00 euros </ td>







 </ Tr>







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







 <td> Navigateur GPS </ td>







 <td> 7 </ td>







 <td> 140,00 euros </ td>







 </ Tr>







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







 Mini-caméscope DVD <td> </ td>







 <td> 1 </ td>







 <td> 270,00 euros </ td>







 </ Tr>







 </ Table>

Comme vous pouvez le voir, il est trivial d'une table HTML, où nous avons pris soin d'attribuer soit à des lignes différentes (<tr>) des classes «normales» et «CA».

Afin de stimuler l'apparition de la rangée sur la ligne de la souris, nous associons les événements élément (<tr>) onmouseover et onmouseout qui prévoient respectivement l'affectation dynamique de «mettre en évidence« la classe lorsque vous survolez et retour en classe démarrer lorsque la souris quitte la ligne.