Texte défilant

Publié le par Titia

Pour faire défiler un texte, il faut utiliser la balise <marquee/>.
<marquee>J'inscris ici mon texte défilant grâce à la balise <marquee/>... </marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...


Ici, le texte défile toujours de gauche à droite. Vous pouvez aussi le faire alterner en ajoutant l'attribut behavior="alternate".
<marquee behavior="alternate">J'inscris ici mon texte défilant grâce à la balise </marquee>... </marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...


Si le sens du défilement ne vous plaît pas, on peut ajouter l'attribut direction, qui prend pour valeur right, left, up ou down.
<marquee direction="right">J'inscris ici mon texte défilant grâce à la balise <marquee/>... </marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...



<marquee  height="50px" direction="up">J'inscris ici mon texte défilant grâce à la balise <marquee/>... </marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...


On peut aussi changer la hauteur ou la largeur, avec les attributs height et width.
<marquee width="150px">J'inscris ici mon texte défilant grâce à la balise <marquee/>... </marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...


On peut aussi déterminer de combien le texte va avancer. C'est l'attribut scrollamount. Et la vitesse du déplacement : scrolldelay. En jouant sur ces deux valeurs, on peut faire défiler lentement :
<marquee scrollamount="1" scrolldelay="500">J'inscris ici mon texte défilant grâce à la balise <marquee/>...</marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...


plus rapidement
<marquee scrollamount="10" scrolldelay="1">J'inscris ici mon texte défilant grâce à la balise <marquee/>...</marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...


On peut aussi faire avancer par saccades
<marquee scrollamount="50" scrolldelay="500">J'inscris ici mon texte défilant grâce à la balise <marquee/>...</marquee>

J'inscris ici mon texte défilant grâce à la balise </marquee>...


Et bien sûr, on peut changer la taille, la police... enfin la totale, quoi... Pour cela, dans la balise <marquee/>, on ajoute la balise <span/> avec tous les attributs de style souhaités.
<marquee><span style="color:#A36EA3; font-weight:bold;">J'inscris ici mon texte défilant (en mauve et en gras) grâce à la balise <marquee/>...</span></marquee>

J'inscris ici mon texte défilant (en mauve et en gras) grâce à la balise <marquee/>...


Oh... Et beaucoup d'entre vous veulent que le texte ne défile plus au passage de la souris... C'est notamment très pratique quand on fait défiler des images à la place du texte... Et bien c'est tout simple !

<marquee><span onmouseover="this.stop();" onmouseout="this.start();">J'inscris ici mon texte défilant (qui s'arrête au passage de la souris) grâce à la balise <marquee/>...</span></marquee>

J'inscris ici mon texte défilant (qui s'arrête au passage de la souris) grâce à la balise <marquee/>...
Publicité

Publié dans Aides diverses

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
G
<br /> Geniale ton explication et c'est vachement sympa de ta part MERCI♥<br />
Répondre
D
<br /> Bonjour<br /> <br /> <br /> J'ai essayé avec le blog d'aide de faire défiler le texte d'une page mais cela ne marche pas?<br /> <br /> <br /> Je vais dans le code html de la page j'ajoute<br /> <br /> <br /> &nbsp; DOR&nbsp;<br /> &nbsp;<br /> &nbsp; lasuite du texte<br /> <br /> <br /> et en fin<br /> <br /> <br /> <br /> <br /> <br /> CEla ne donne rien du tout ?<br /> <br /> <br /> merci de m'aider<br /> <br /> <br /> pour la page http://dorasela.over-blog.net/pages/CV_DORA_Sela-8466922.html<br />
Répondre
T
<br /> merci de ces précisions, je n'arrivais plus à mettre une phrase défilante, et encore moin sur mon blog également canalblog. <br />
Répondre
C
<br /> <br /> Bonjour<br /> <br /> <br /> Comment retarder le départ d'un texte défilant?<br /> <br /> <br /> Cordialement<br /> <br /> <br /> JCM<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> JE COMPREND MAIS RIEN ! SA NE MARCHE PAAS ! ;)<br /> <br /> <br /> <br />
Répondre