Un
effet "rollover" avec du texte
Confirmé
Un effet « rollover » est obtenu, en Javascript, par l'intermédiaire
des événements onMouseOver et onMouseOut, et consiste à intervertir
deux images au passage de la souris. Très utilisée sur le web, cette
technique s'avère néanmoins peu optimale dans l'élaboration, par
exemple, de menus déroulants. Là où chaque sous-menu ne pourrait
être qu'une simple ligne de texte, il faut créer deux images :
l'une s'affichant lorsque le curseur survole ce sous-menu, l'autre
s'affichant quand le curseur s'en retire. La conversion du texte
en image, outre le temps de sa réalisation, alourdit également la
taille totale de la page, ralentissant le téléchargement. Par ailleurs,
les lignes de code indispensables sont nombreuses.
Il est néanmoins possible d'obtenir un effet équivalent avec du
texte, non plus avec des images, en s'appuyant sur les feuilles
de style (deuxième niveau de spécifications), en tirant profit de
la nouvelle pseudo-classe de la balise <A> :hover (qui,
malheureusement, n'est implémentée que par Internet Explorer 5 et
Netscape 6).
Une pseudo-classe permet de définir un style associé à un événement.
Par exemple, :visited (autre pseudo-classe de la balise <A>)
définit le style d'un lien qui a déjà été visité.
Pour sa part, la pseudo-classe :hover est associée aux événements
onMouseOver et onMouseOut (à ceci près que l'on n'utilisera pas
le Javascript ici). Ainsi, nous définirons le style d'un sous-menu
comme suit :
.menu { font-family:Verdana;
font-size:9pt;
text-decoration:none;
color:black; }
Puis nous associerons cette classe .menu à la pseudo-classe :hover,
grâce au sélecteur suivant :
A.menu:hover { font-family:Verdana;
font-size:10pt;
font-weight:bold;
color:red; }
Ainsi, au passage de la souris, le texte d'un sous-menu aura à la
fois changé de taille (10pt au lieu de 9) de couleur (rouge au lieu
de noir) et de style (gras au lieu de normal). Le résultat donnera :
A noter que la déclaration d'une entrée de menu se fera comme suit :
<A HREF="http://www.journaldunet.com"
CLASS="menu">JDN</A>
Cette méthode s'avère donc extrêmement simple à utiliser et
à comprendre, avec un minimum de code source. Mais, encore une fois,
cette effet est à réserver aux navigateurs les plus récents. Pour
ceux qui n'en seraient pas familiers, une introduction
aux feuilles de style est par ailleurs disponible.
[Jérôme
Morlon 22
mars 2001 , JDNet]
|
