Changer le fond des cellules d'un tableau au survol de la souris - 1ère partie

Il s'agit d'une technique couramment utilisée pour réaliser des menus.
Dans ce cas n°1, nous aborderons le tableau dont toutes les cellules ont la même couleur "au repos" et la même couleur au survol de la souris

C'est moins difficile à réaliser qu'il n'y paraît.

PREMIERE PARTIE :

Vous collez en html le pavé suivant

<style type="text/css">
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
</style>

Vous personnalisez ainsi :

la cellule en mode normal :

a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color:#3c4157;  }

border: 1px solid #3c4157 : la bordure
background-color: #d8e2ec : le fond
color: #3c4157: la couleur de la police

la cellule au survol de la souris :

a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  } 

Modifiez selon le même schéma que pour le lien normal.

Le padding représente les marges intérieures, afin que l'encadrement ne soit pas collé au lien.

DEUXIEME PARTIE :

Vous collez en html, à la suite, le pavé suivant qui représente le tableau

<table cellspacing="0" cellpadding="0" align="center" border="0">
 <tbody>
  <tr>
   <td>
   <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>
   </td>
   <td>
      <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 2">Lien 2</a></p>
   <td>
      <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 3">Lien 3</a></p>
   </td>
   <td>
     <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 4">Lien 4</a></p>
   </td>
   <td>
    <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 5">Lien 5</a></p>
   </td>
  </tr>
 </tbody>
</table>

Vous y personnalisez ensuite les liens :

<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>

devient par exemple

  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html">Toute la Déco</a></p>

Si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre, vous rajoutez target="_blank", ce qui donne par exemple

  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html" target="_blank" >Toute la Déco</a></p>

Vous obtenez au final :

Top Liste

PlugBoard

Gadgetothèque

Toute la Déco

Contact