Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
dossier cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > La technique > Internet et le Web > Les feuilles de style > L'effet de survol (rollover)           Révision : 27 avril 2004
Page précédente Les feuilles de style Pas encore de page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(27 avril 2004)

XII - Les effets de survol (rollover)

XII-1- Introduction

Au chapitre précédent, nous avons entrevu la possibilité de modifier, à l'aide des styles, l'aspect d'un lien survolé par le curseur de la souris, grâce à l'utilisation de la pseudo-classe HOVER. Certains concepteurs se sont emparés de cette idée pour réaliser des "effets de survol" (rollover) sans utilisation de script côté client, ce qui a pour effet d'alléger le code la page, et donc son poids.

Quel que soit leur mode de réalisation, ces techniques de survol ne modifient pas fondamentalement les qualités d'un site Web, mais elles font partie des modes qui courent la toile. En fait, le survol est un peu suranné, la tendance actuelle consistant plutôt à enrichir les pages Web avec des menus déroulants.

L'effet de survol le plus simple consiste à modifier, lors du passage du curseur, les propriétés d'une boîte construite autour de la balise A. Si le lien est appliqué à du texte, cette technique ne met pas en jeu d'image (d'où un téléchargement plus rapide de la page), et sa réalisation est aisée. Mais elle présente deux limitations :

Le véritable effet de survol met en jeu deux images (souvent de même taille afin de ne pas bouleverser la présentation de la page), dont l'une remplace l'autre lors du passage du curseur. Cet effet est parfaitement réalisable en utilisant les seules feuilles de style, donc sans script côté client. Deux techniques peuvent être utilisées :

On peut utiliser la première technique pour créer des boutons à trois états (non visité, survolé, visité).

Les feuilles de style permettent également de réaliser quelques animations simples (qui seront traitées dans le chapitre suivant) :

Par contre, et comme nous l'avons déjà souligné au chapitre II, l'implémentation actuelle de CSS2 dans Internet Explorer ne permet pas de réaliser de véritables menus déroulants, constitués d'une liste de liens actifs s'affichant lorsque le curseur survole leur en-tête. Là, point de salut hors de JavaScript, et ce probablement pour longtemps.

 

XII-2- L'effet de survol par modification de la boîte

Le lien à survoler peut s'appliquer à du texte ou à une image. Nous examinerons ces deux cas tour à tour.

Le lien est appliqué à un texte. Le code suivant crée un effet de survol sur un boîte construite autour du lien appliqué au texte "Survolez !". Le style du lien au repos est défini par le sélecteur "a.A", celui du lien survolé par le sélecteur "a.A:hover". On voit que toutes les propriétés de la boîte construite autour du lien peuvent être modifiées : marges, couleur de fond, cadre et attributs du texte. On peut donc simuler un changement complet de bouton au passage du curseur, mais sans pouvoir modifier le contenu du texte, et en se cantonnant à la seule géométrie rectangulaire.

<head>
<style>
a.A { border: 5px groove fuchsia; padding: 4px; text-decoration: none; background-color: aqua; color: blue; font-weight: bold; font-family: serif; font-size: 12pt }
a.A:hover { border: 5px groove aqua; padding: 5px 5px 6px 5px; background-color: fuchsia; color: white; text-transform: capitalize; font-family: arial; font-size: 10pt }
</style>
</head>
 
<body>
<center>
<p style="line-height: 30px"><a class="A" href="#back-inline-1">Survolez !</a></p>
</center>
</body>

Faites passer le curseur de la souris au-dessus du bouton situé ci-dessous pour voir fonctionner l'effet de survol :

Survolez !

Les marges internes de la boîte construite sur le lien ont été réglées de telle sorte (sur PC) que le survol du bouton n'entraîne pas de variation de dimensions (44x37 pixels). Il arrive cependant dans le navigateur de Netscape que, pour certaines valeurs définissant les propriétés de la boîte, le texte situé à la suite du bouton soit déplacé par le survol, ce qui est d'un effet assez désagréable. Sur Mac, la situation est inversée : c'est IE5 qui fait parfois bouger le texte (et -- plus grave -- dégrade l'affichage quand on survole le bouton de manière répétée). Ce problème, lorsqu'il se présente, peut être corrigé grâce à l'astuce suivante : le code du bouton est incorporé à une cellule de tableau dont on règle simultanément la hauteur via la propriété LINE-HEIGHT et l'attribut HEIGHT. Ne nous demandez pas pourquoi cela marche...

Le lien est appliqué à une image. Cette image doit comporter une partie transparente afin que le changement de couleur de fond au survol puisse se manifester. Il ne faut pas que ce changement soit trop important, sinon les effets de halo prennent de l'importance (il est conseillé de rester dans le même ton). Cette technique est donc d'un usage assez limité ; elle permet de réaliser un bouton dont la forme peut être quelconque, mais le contenu du texte (qui fait partie de l'image) ne peut pas être modifié.

Tout fonctionne bien avec IE, mais il faut contourner un bug du navigateur de Netscape. Ce dernier est incapable -- dans une boîte en-ligne -- de superposer correctement une image (partiellement transparente, pour laisser voir le fond) et une image de fond. On constate que cette dernière ne s'affiche pas à la bonne place, et que le pavage ne s'effectue pas correctement. La solution consiste à transformer la boîte de type "en-ligne" en boîte de type "bloc" grâce à la propriété DISPLAY. Il faut alors ajuster la largeur de la boîte à celle de l'image, pour éviter que la boîte ne s'étende sur toute la largeur de la page. Le code correspondant figure ci-dessous.

<head>
<style>
a.D { background-color: #66FFFF; display: block; width: 110px }
a.D:hover { background-color: #CCFFFF }
</style>
</head>
 
<body>
<center>
<a class="D" href="#back-inline-2"><img border="0" src="images/false-rollover-css_32_ps8.gif" width="110" height="50"></a>
</center>
</body>

Le bouton ainsi obtenu est représenté ci-dessous. Si l'effet de survol fonctionne effectivement, la zone de couleur cyan et le texte doivent devenir plus clairs.

XII-3- L'effet de survol par changement de l'image de fond

Le mécanisme de base. On peut réaliser un véritable effet de survol, c'est à dire le remplacement d'une image par une autre lors du passage du curseur de la souris, en se servant des seules feuilles de style. De ce fait, on peut utiliser des images de forme quelconque, et modifier le texte si on le désire (en l'incorporant à l'image). Jugez tout de suite du résultat sur l'exemple ci-dessous :

 

Son principe de fonctionnement est le suivant :

Le code correspondant figure ci-dessous :

<head>
<style>
a.B { background-image: url('images/true-rollover-css-1_16_ps8.gif'); display: block; width: 100px }
a.B:hover { background-image: url('images/true-rollover-css-2_16_ps8.gif') }
</style>
</head>
 
<body>
<center>
<a class="B" href="#back-inline-3"><img border="0" src="images/vide.gif" width="100" height="30"></a>
</center>
</body>

Le préchargement. Cette façon de pratiquer l'effet de survol via les feuilles de style a été critiquée pour la raison suivante. Les navigateurs ne téléchargent pas l'image de substitution (dont l'adresse figure dans la définition du style) tant que le survol n'a pas eu lieu -- un point que nous avons effectivement vérifié pour IE6/PC. Si la liaison entre le serveur et l'internaute est lente, le premier effet de survol peut s'effectuer difficilement, ce qui entraîne des défauts d'affichage (flickering). Ensuite, les deux images se trouvent dans le cache du navigateur, et le fonctionnement de l'effet de survol devient quasi instantané.

Le problème n'est pas nouveau, et il affecte aussi les effets de survol réalisés avec d'autres méthodes. On y remédie en préchargeant l'image de substitution, de telle sorte que le navigateur la place dans son cache, prête à servir pour le survol. Pour ce faire, on peut recourir à l'une des trois techniques suivantes :

Pour pratiquer cette dernière technique, on introduit le code ci-dessous dans le corps de la page Web, avant le code correspondant à l'effet de survol :

<img src="images/true-rollover-css-2_16_ps8.gif" style="display: none">

La règle "display: none" implique que non seulement l'image ne soit pas affichée, mais que de plus aucune place ne lui soit reservée. Rien n'apparaît dans l'affichage de la page Web, mais le navigateur télécharge l'image et la met en mémoire cache lorsqu'il rencontre cette commande.

 

XII-4- L'effet de survol par déplacement de l'image de fond

La meilleure solution pour éviter l'effet de "flickering" consiste à ne pas avoir besoin de préchargement. La technique s'appelle Pixy Rollover, baptisée ainsi à partir du nom (ou plutôt du surnom) de son inventeur. Elle consiste à rassembler les deux images en une seule (ce qui supprime la nécessité du préchargement -- et accessoirement accélère quelque peu le téléchargement), et à obtenir l'effet de survol en déplaçant l'image de fond (grâce à la propriété BACKGROUND-POSITION). Ci-dessous se trouve un exemple de réalisation, avec le code correspondant. On peut vérifier dans ce dernier qu'une seule image est utilisée au lieu de deux dans l'exemple précédent.

<head>
<style>
a.C { background-image: url('images/pixy-rollover-css_32_ps8.png'); display: block; width: 100px }
a.C:hover { background: url('images/pixy-rollover-css_32_ps8.png') 0 -40px }
</style>
</head>
 
<body>
<center>
<a class="C" href="#back-inline-4"><img border="0" src="images/vide.gif" width="100" height="30"></a>
</center>
</body>

Remarque : si on se contente, pour écrire le texte du bouton, d'une police que l'on trouve couramment sur les machines des internautes, on peut séparer le texte de l'image, et traiter les deux indépendamment lors du survol.

 

XII-5- L'effet de survol sans permutation d'image

La technique. Elle consiste à :

On notera que ce mécanisme -- qui est illustré ci-dessous -- ne nécessite pas de préchargement d'image, puisque le navigateur affiche les deux images (l'une au dessus de l'autre) dès qu'il a reçu les données correspondantes.

Le code s'écrit ainsi :

<head>
<style>
a.E { display: block; width: 100px; height: 30px; background-image: url('images/true-rollover-css-2_16_ps8.gif') }
a.E:hover { visibility: visible }
a.E:hover img { visibility: hidden }
</style>
</head>
 
<body>
<center>
<a class="E" href="#back-inline-5"><img border="0" src="images/true-rollover-css-1_16_ps8.gif"></a>
</center>
</body>

Une variante. On peut créer une variante qui fonctionne également bien en déclarant que l'image initiale n'est pas affichée lors du survol (au lieu d'être masquée). Cela revient à remplacer la règle "a.E:hover img { visibility: hidden }" par la règle "a.E:hover img { display: none }". Cette variante est utilisée pour faire fonctionner le bouton ci-dessous :

 

XII-6- Conclusion

Les feuilles de style permettent de réaliser des boutons avec effet de survol ( rollover) sans utilisation de script côté client, et sans effet de flickering. Plusieurs techniques peuvent être utilisées, qui fonctionnent toutes sur les plates-formes Mac et PC, avec les versions récentes des deux principaux navigateurs du marché.

Par conséquent, l'effet de survol via les styles est une technique hautement recommandable, qui devrait à terme remplacer complétement son homologue utilisant Javascript.

Page précédente Retour au sommaire Pas encore de page suivante
Page précédente Retour au sommaire Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base  
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm