Comment modifier le contenu ou la présentation d'un texte en survolant un lien ou en cliquant dessus ?

Cet article passe en revue les principales méthodes envisageables. A chaque fois, on trouvera un lien vers des explications détaillées pour la mise en oeuvre.

On peut tout d'abord transformer ces textes en images et utiliser les techniques classiques des rollovers. Cela permet de donner une présentation graphique très raffinée à ces écritures, mais au prix de divers inconvénients.

Citons d'abord l'alourdissement sensible de la page quand on multiplie ces rollovers. Ensuite, on ne peut pas reprendre ces textes à la volée (en réponse à un questionnaire, par exemple). Tout changement dû à une évolution du site exige qu'on refasse les images, ce qui peut devenir fastidieux. Enfin, le remplacement d'un texte par une image peut nuire à l'accessibilité du site si le visiteur ne peut pas en lire le contenu, quelle qu'en soit la raison, que le visiteur soit malvoyant, qu'il utilise un navigateur non graphique... ou que ce soit un robot d'un moteur de recherche. Les textes alternatifs des sections ALT ne pallieront pas tous les problèmes.

Aussi est-il intéressant de se tourner vers les techniques plus légères de manipulations de texte permises par les feuilles de style et le DHTML. Les scripts seront plus compliqués que pour les rollovers parce que les problèmes de compatibilité entre navigateurs seront plus importants. En effet, en règle générale, on sera contraint à envisager trois cas possibles : IE4+, NN4 et les navigateurs modernes «compatibles W3C» (comprendre : respectant les normes du consortium W3C). Rien ne marchera pour les navigateurs plus anciens comme NN3 ou IE3... et vraiment fort peu de choses pour NN4.

Manipulation de visibilité de calques

On peut commencer par transposer directement le principe des rollovers en DHTML : on écrit les différents textes à faire apparaître sur autant de calques (c.à.d. des blocs <DIV> positionnées en absolu) et on rend ces calques visibles ou invisibles en réponse à différents évènements. Bien évidemment, ce n'est plus du «pur texte» puisqu'on peut également mettre des images dans ces textes, mais c'est une technique très puissante qu'il faut garder en vue. Cliquez ici pour en savoir plus.

Changement d'un texte par un autre

Avec IE4+ et les navigateurs «compatibles W3C» (NN6, Mozilla...), on peut changer le texte de n'importe quel élément HTML. A titre d'exemple, passez la souris ici et voyez ce qui arrive au titre de ce paragraphe.
Cliquez ici pour en savoir plus.

Manipulation d'affichage de blocs

Passez la souris ici pour une démo, qui va faire apparaître un texte ci-après. Cliquez sur le lien précédent pour avoir les détails de mise en oeuvre.

On notera la différence avec la technique de manipulation des visibilités : cette dernière ne change rien à l'agencement général de la page, alors que ce jeu sur les styles display provoque des glissements des blocs de texte.

Manipulations de style

Nous ne donnons ici qu'une démonstration. Passez la souris ici pour voir ci-après un échantillon de ce que l'on peut faire :

Voici un bloc DIV cobaye

On peut changer à peu près tout dans le style d'un élément HTML : les couleurs du texte ou du fond, la police, la taille des caractères, leur graisse, la bordure, etc... Il y aura deux cas à considérer, selon qu'on veut

Charles