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

Dans ce cas n°2, plus compliqué, nous aborderons le tableau dont chaque cellule a une couleur différente "au repos" et une couleur différente au survol de la souris

A lire : Cas n°1

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 ;  }
a.B {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.B:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
</style>

Sachant que

a.A et a.A:hover concernent la 1ère cellule (nommée A)
a.B et a.B:hover concernent la 2ème cellule (nommée B)

Vous personnalisez ainsi le lien normal :

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

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

le lien au survol de la souris :

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

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="B" href="adresse du lien ">Lien 2</a></p>
   </td>
 </tbody>
</table>

A personnaliser ainsi

<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>

Si vous avez besoin d'une cellule supplémentaire, vous rajoutez dans le 1er pavé :

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

et dans le second pavé :

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

après la ligne suivante :

<td>
    <p style="line-height: 30px" align="center"><a class="B" href="adresse du lien 2">Lien 4</a></p>
   </td>

et ainsi de suite.

Vous obtenez au final :

Top Liste

Plugboard

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

Créer un rollover

On appelle rollover lorsqu'une image s'affiche à la place d'une autre au survol de la souris.

Ainsi :



Concrètement, cette technique est utilisée lors de la réalisation de menus.

Pour le réaliser, il vous faut l'adresse de vos 2 images.

Ensuite, il vous suffit de coller en html

<img alt="" onmouseover="this.src=' http://www.lienversimage2.jpg '" onmouseout="this.src=' http://www.lienversimage1.jpg '" src="http://www.lienversimage1.jpg " />