Code-Web.org

On oublie déjà toutes les fioritures Java Script pour les rollover, c'est complètement inutile pour un lien. La pseudo class :hover en CSS fera largement l'affaire pour un lien. En revanche, pour un élément d'un autre type, on utilisera du Java Script puiqu'Internet Explorer (encore) ne la reconnait que sur les éléments de type lien (<a ...>).

Nous allons utiliser ce que l'on appel dans le jargon une image coulissante. En fait, les deux images que vous utiliserez pour votre rollover ne feront plus qu'une seule. Les deux images sont collées l'une après l'autre dans une image qui fait donc deux fois la hauteur d'une de ces deux images.

Supposons que les deux images suivantes constituent votre effet de rollover, à gauche l'image normale et à droite celle qui la remplace au survol :

Avec ces deux images, on utiliserait pas exemple les code suivants :

<a href="..." class="onglet">Un lien</a>

.onglet
{
  display:block;
  width:165px;
  height:33px;
  background:transparent url('onglet.png') no-repeat top left;
}
 
 
.onglet
{
  /* Le survol va déclancher le chargement d'un nouvelle image */
  background-image: url('onglet_over.png');
}

Nous allons donc combiner nos deux images en une seule. Ce qui nous donne l'image suivante :

On utilise enfin astucieusement le placement de l'image de fond. On ne change pas le code HTML mais uniquement le CSS :

.onglet
{
  display:block;
  width:165px;
  height:33px;
  background:transparent url('onglet_final.png') no-repeat top left;
}
 
 
.onglet
{
  /* Le bas de l'image est collé au bas du conteneur */
  background-position: bottom;
}

Une petite démo pour vous en convaincre définitivement. Comparez les deux versions.