Texte défilant horizontalement dans une page

La balise marquee, invention Internet Explorer, nétait pas ... et n'est toujours pas à ce jour (mai 2002) conforme aux normes du W3C. C'est bien dommage car, pour ceux qui en jugent l'utilisation intéressante, il s'agit d'une commande bien pratique et facile à mettre en oeuvre. Comme, par ailleurs, elle ne fait pas appel à un langage de script, elle est sensée être lisible pour tout navigateur ... qui l'interpréte.

Il paraît désormais exclu, semble-t'il, qu'elle fasse partie du langage HTML. J'avais publié, en 1999, un script (il se trouve toujours dans cette rubrique) permettant d'obtenir un résultat semblable. Les navigateurs ont entretemps évolué, leur interprétation de certaines commandes aussi, et ce script n'est désormais plus "universel"... Comme bon nombre de mes lecteurs m'ont signalé ne pas pouvoir se passer de ce gadget (mais en est-ce vraiment un ?), voici un nouveau script fonctionnant sous la majorité des butineurs d'aujourd'hui :

Le résultat obtenu est sensiblement le même que celui de la balise orpheline. Comportant une seule fonction (le "scrolling") et quelques variables, il autorise plusieurs réglages afin de répondre au résultat voulu : la vitesse de défilement, le blanc (ou autre signe) affiché entre chaque retour du message défilant et le texte, évidemment. Développé en JavaScript, il doit être écrit dans la page de la manière suivante :

<script type="text/JavaScript" language="JavaScript">

function scroll(n)

{var blanc=" ";

var texte = "Ceci est une démonstration de l'alternative par JavaScript de la balise propriétaire
                  [marquee] (Internet Explorer) afin d'obtenir le même effet sur tous les navigateurs actuels.";

var scrolling_text = blanc + texte;

scrolling_text = scrolling_text.substring(n,scrolling_text.length);

document.message.scroll_text.value = scrolling_text;

if(scrolling_text.length > 0) n ++;

else n = 0;

s = n;

n = setTimeout("scroll(s)", 100);}

</script>

Pour afficher le résultat, vous ferez appel à un champ de saisie que l'on utilise pour les formulaires : input. Il suffira d'écrire le code source suivant à l'endroit où vous désirez faire apparaître ce message :

<form name = "message"><input name = "scroll_text" size = "39"></form>


Vous vous souvenez sans doute (si vous avez suivi les exposés sur les formulaires ...) que l'attribut size est destiné à dimensionner le champ de saisie qui, ici, sert de champ d'affichage : réglez selon vos besoins, c'est à dire en fonction de la longueur du texte. Centrez éventuellement avec la balise <center> et, afin de faire démarrer le texte dès l'ouverture de la page, n'omettez pas d'ouvrir celle-ci par un :

<body onload="scroll(0)">

Il vous restera la possibilité de personnaliser ce message par un choix de police et de couleur : les feuilles de style peuvent vous ouvrir la voie à toutes les fantaisies ! Voyez donc dans la rubrique qui leur est consacrée afin de parfaire vos connaissances : vous ne le regretterez pas.

Ah, dernier conseil : si vous envisagez l'affichage de ce message dans plusieurs pages, il est préférable d'enregistrer le script séparément, dans un fichier avec l'extension .js. Il vous suffit de le transcrire tel que vous le voyez dans l'encadrement jaune SANS les balises d'ouverture et de fermeture et de créer un lien en tête de page, entre les balises head comme ceci par exemple :

<script type="text/javascript" language="JavaScript" src="message.js"></script>

Ce procédé offre un avantage supplémentaire : si votre message est susceptible d'être remplacé de temps à autre, il est plus commode de ne modifier que ce fichier plutôt que toutes les pages contenant le texte défilant !

A vous de jouer !

retour