Insérer un texte ou une image défilant (MARQUEE)

Lundi 17 janvier 2005

Dans le forum, la question du texte déroulant est souvent revenue.
Comment le créer, peut-on mettre une image, un lien?
La réponse est toujours la même: insèrer une balise MARQUEE.
En bien je vous propose de la personnaliser votre balise MARQUEE !!
En effet on peut jouer sur quelques paramètres pour faire défiler le contenu plus ou moins rapidement, définir la direction de défilement.
C'est l'objet de cet article.
Mais avant tout, je tiens à souligner que l'on peut mettre quasiment n'importe quel contenu dans un bandeau défilant: du texte, des images, des liens ... Car son contenu peut être formaté avec du HTML ou du CSS. Je ne m'étendrait pas sur la personnalisation du contenu du bandeau, ça c'est votre affaire !!!

Le générateur
Collez le code HTML de ce que vous voulez faire défiler dans la zone texte
Choisissez vos paramètres de défilement
Cliquer sur le bouton Générer pour avoir le code HTML de votre bandeau et son aperçu.
Vous collerez ce code (en mode HTML) dans votre entête, votre pied de page, un module texte libre ou un article.
Vous pouvez définir la hauteur (ou la largeur) du bandeau en ajoutant l'attribut HEIGHT (ou WIDTH), par exemple pour définir une hauteur de 30 pixels :
<marquee height="20px" behavior="scroll" direction="left" scrollamount="1" scrolldelay="50" loop="-1">code HTML à faire défiler</marquee>

Texte ou code HTML à faire défiler:	code HTML à faire défiler
Type de défilement:
Direction de défilement:
Vitesse de défilement (en pixels):
Délai de défilement (en ms):
Nombre de répétions (-1 ou infinite pour infini):
Arrêter le défilement sous la souris:

par Francisek publié dans : Les inserts
recommander

Commentaires

Et oui, dans l'exemple je veux définir une hauter de 30 pixels et je n'en mets que 20.
Ca sent le fisc tout ça :-)

commentaire n° : 1 posté par : Francisek le: 17/01/2005 02:35:28

Salut!
Génial cet article! je vais pouvoir continuer mes essais. Merci pour le site sur les textures, je n'ai pas assez d'yeux pour tout découvrir, il y en a tellement! Tu sais, je commence à comprendre des trucs...et sans bouquin! ahhhhhhh

commentaire n° : 2 posté par : Gabrielle (site web) le: 17/01/2005 07:25:48

Merci à toi pr ts ces conseils qui font progresser les gens qui n'ont aucune connaissance des différents langages internet

commentaire n° : 3 posté par : Loic (site web) le: 17/01/2005 15:46:17

Est-ce que notre généreux donateur de balises connaît ces URL (?) :

vnatrc.org

http://yast.vnatrc.net/YAAAT/YAAAT_zyva

voire même :

aleatoire.org

ou

http://drone-zone.org/room101/index.php

(applaüosz tellurico-hacktivistes & perplex propaganda, bäy Rico da Halvarez, bitüur estreym & ôtr Drône 1er ; à noter : KeleK szAsz infime diszipl)

commentaire n° : 4 posté par : KeleK (site web) le: 17/01/2005 22:26:35

Et ben non, je ne connaissais pas, le premier est sympa, pour les autres, c'est pas vraiment ma tasse...

commentaire n° : 5 posté par : Francisek le: 17/01/2005 22:38:17

Merci pour ton super travail, ton travail et conseils nous permettent d'améliorer nos blogs qui comptent tellement pour nous !

Handimob

commentaire n° : 6 posté par : Handimob (site web) le: 18/01/2005 08:42:28

Argh! Francisek, je comprends plus rien sur ton blog... ça change de couleurs à chaque page et parfois je vois la photo en fond de module à gauche et parfois non! C'est quoi ce traquenard?

commentaire n° : 7 posté par : My (site web) le: 19/01/2005 11:16:43

Bouh, je voulais télécharger dermod.zip, je m'étais armée de ton article imprimé, j'allais prendre une grande respiration et pis..."page introuvable", pareil pour les autres programmes. re-bouh! Tout n'est pas rétabli avec les php et tout ça? (wouah, je dis des mots compliqués!!)

Biz

commentaire n° : 8 posté par : Gabrielle (site web) le: 19/01/2005 21:39:54

Le lien vers le téléchargement des outils est rétabli, tout devrait rentrer dans l'ordre.
C'est dû à un aménagement des admins ?

commentaire n° : 9 posté par : Francisek le: 20/01/2005 12:13:13

Ouaip, ça remarche. Je vais donc m'armer de courage et me plonger dans le bazar à dérouler. Bien sûr, j'essaie d'abord sur mon cobaye, hi hi.

commentaire n° : 10 posté par : Gabrielle (site web) le: 20/01/2005 19:39:15

Comment fait t on pour inserer une image dans le texte de defilement ???

commentaire n° : 11 posté par : D@vid (site web) le: 22/01/2005 19:35:54

Il suffit de mettre le code HTML d'affichage de l'image dans code HTML à faire défiler.
Pour mémoire, le code d'affichage d'une image c'est:

commentaire n° : 12 posté par : Francisek le: 22/01/2005 19:52:01

merci beaucoup non de zeus ca marche !!!!!

commentaire n° : 13 posté par : D@vid le: 23/01/2005 11:52:40

Encore une fois merci c est un superbe site tres pro !!! je voudrai maintenant savoir comment inserer une image sur le fond du blog ???

commentaire n° : 14 posté par : D@vid le: 23/01/2005 12:37:06

D@vid >>> va voir l'article http://la.faq.over-blog.com/article-540799.html qui explique comment faire.

commentaire n° : 15 posté par : Francisek le: 23/01/2005 18:04:37

Francisek je vous remercie pour votre lien pour l' O.D.I.A mais le lien ne fonctionne pas vous avez mis deux fois http://

Désolé d'avoir mis ce commentaire sur cette article car ça n'a aucun rapport...

Votre Ministre dévoué.

commentaire n° : 16 posté par : Ministre de la Bagarre du Royaume du Grand Nord (site web) le: 24/01/2005 17:52:17

oui mais une fois qu'on a notre
Bonjour.......
On le met ou dans notre fichier CSS, et on le met tel kel?
Merci je débute :o)

commentaire n° : 17 posté par : Didier (site web) le: 24/01/2005 18:48:35

Tout est dans l'article :
Vous collerez ce code (en mode HTML) dans votre entête, votre pied de page, un module texte libre ou un article.

commentaire n° : 18 posté par : Francisek le: 24/01/2005 18:55:36

Merci pour ton aide. Tu nous fais gagner beaucoup d'énergie ...

A charge de revanche ...

commentaire n° : 19 posté par : Mathieu (site web) le: 28/01/2005 09:56:35

hello , je suis nouvelle j'ai essayer de faire toute les etapes mais sa ne fonctionne pas g mis sa en mode html au desous de mon titre mais sa reste en ecriture comme sa rienne se passe :( Peut m'aider L'histoire se répéte sans cesse a Wall Street

commentaire n° : 20 posté par : Forex Queen (site web) le: 11/02/2005 14:39:18

Je viens d'aller voir ton blog, et ca fonctionne ! (comme dans ton exemple ci-dessus) !?!?

commentaire n° : 21 posté par : Vger-Mel (site web) le: 12/02/2005 19:16:04

Bonjour,
Je cherche désespérément une solution à mon problème:
-J'ai une balise marquée dans ma "frame" (c'est une pseudo frame php) qui affiche des infos.
-Comme cette frame est incluse dans toutes les pages de mon site, la balise est rechargée à chaque changement de page. Donc le texte recommence du début.

Question : Comment faire pour que mon texte défilant continue même lors des changements de pages ???

Merci d'avance

commentaire n° : 22 posté par : Maikinoki le: 01/03/2005 12:09:43

Maikinoki >>> C'est effectivement un problème désespéré : la seule solution que je vois serait de mémoriser la position actuelle des infos dans le php avant le changement de page et de reprendre à la position après !! Bon courage !!

commentaire n° : 23 posté par : Francisek le: 01/03/2005 15:35:16

Bonjour ! j'ai beau suivre ces conseils a la lettre, je n'arrive pas a modifier la hauteur de mon texte defilant :(
Ze Blog Of Mister Pinguin !!!
Mon texte reste a la hauteur par defaut et je ne sais vraiment pas comment faire !
ps: grace a votre site et au cours de babs, j'ai decouvert le CSS et je vous en remercie car ca m'a beaucoup aidé pour mon blog ^^ bye !

Francisek : Et en mettant ton texte dans un div dont tu fixes la hauteur ?

Ze Blog Of Mister Pinguin !!!

commentaire n° : 24 posté par : Mister Pinguin (site web) le: 26/03/2005 17:21:53

merci pour toutes tes infos... c'est génial... seulement, j'ai une question quant au texte défilant : comment faire pour que le début du texte rejoigne la fin lors du défilement... ou plutôt réduire l'espace "blanc" entre le début et la fin.. si je ne me fais pas comprendre, voir pour exemple mon bas de page... un grand merci. amitiés

commentaire n° : 25 posté par : maxime (site web) le: 31/03/2005 17:47:47

bonjour! merci pour tout ce site tres précieux...cela dit une question: j'ai voulu insérer un image défilante, elle défile bien mais impossible de modifier la taille comme tu le dis...ou alors ai je mal compris? merci!

commentaire n° : 26 posté par : franck le: 04/04/2005 15:58:48

salut,
je n'arrive toujours pas a faire un texte défilant. J'ai mozilla firefox. Et je suis nul sur l'ordi...aide moi car mon blog est une pourriture et je n'arrive rien a faire...merci d'avance!!

Francisek : Une fois que tu as généré le code, il faut le coller en mode HTML là où tu veux qu'il apparaisse.

commentaire n° : 27 posté par : la miss lixou (site web) le: 06/05/2005 14:06:04

Salut Fransicek , quelle texte il faut rajouté pour que quand on met la souris sur un bouton , il arette de défilé ( tu le met pas sa dans ta partie QUI EXPLIQUE COMMENT FAIRE UNE FENETRE QUI DEFILE AUTOMATIC

Francisek : Ca ce n'est plus du HTML mais au moins du javascript. Le marquee se contente de faire défiler le texte.

commentaire n° : 28 posté par : muller (site web) le: 07/05/2005 20:08:20

Salut Génie!
Dis, j'ai remarqué un truc rigolo: si on prend les options "bas" et qu'on augmente le scrollamout (à partir de 90), ça donne un texte clignotant, vu que ça va trop vite. POur ceux (je sais, t'aime pô) qui aiment les trucs qui clignotent (puisque blink ne marche pas sous IE)

TEXTE

commentaire n° : 29 posté par : Gabrielle (site web) le: 08/05/2005 16:02:38

merci !

commentaire n° : 30 posté par : N (site web) le: 30/06/2005 11:49:51

Merci de venir en aide à la débutante de grand'mère que je suis !!! Je suis très souvent scotchée à ton blog à outils ... mais je m'en sors !
En tout cas, tu me donnes l'envie de m'améliorer !
Trop bien ton site ... !
Bye !

commentaire n° : 31 posté par : Christine (site web) le: 02/07/2005 03:15:26

Hum... je te pique ton générateur, pour mon usage perso (hors de question de mettre sur mon blog). Je pense que tu t'en fiches, mais je le dis quand même, par acquis de conscience.

Sinon, j'aime bien le style vert. Et les modules qui se replient, c'est vraiment sympa.

Allez, à plus! =)

Francisek : Pour un usage perso, ok. Si tu fais des modifs, fais moi voir à quoi ça ressemble ;-)

commentaire n° : 32 posté par : Artis (site web) le: 05/07/2005 10:52:33

Salut,

J'ai créé un message défilant composé de 10 liens vers des actus. Ma question, au survol du message est-il possible d'arrêter le défilement et de le reprendre si la personne sort de la zône ?

D'avance merci !
Patrick

commentaire n° : 33 posté par : GILET (site web) le: 07/07/2005 15:27:58

Comment puis je faire pour que ce que je veux faire apparaitre défile 2 fois PUIS reste en place sans défiler!!!

MERCI

commentaire n° : 34 posté par : kristof (site web) le: 07/07/2005 19:11:28

Une autre question: dans mon bas de page comment puis je faire défiler par dessus ou tout simplement écrire PAR DESSUS mon image?

2xMERCI

commentaire n° : 35 posté par : kristof (site web) le: 07/07/2005 20:02:43

Une dernière question: comment faire pour incruster 2 images sur le fond du blog: 1à gauche et 1 autre à droite? si je mets 2 background image il ne prend que le deuxième!

10000 merci pour tous tes conseils

commentaire n° : 36 posté par : kristof (site web) le: 10/07/2005 20:18:46

merci encore à toi; j'espère que tu récupères de grosses billes de tout cela qu'elles soient morales ou très consistantes car c'est génial par Francisek interposé on a l'impression d'être très compétant !!!!(même si le rendu reste modeste) et ça c'est excellent pour le moral!

commentaire n° : 37 posté par : marie le: 23/07/2005 18:10:23

GILET >>> C'est possible par javascript mais absolument incompatible entre les différents navigateurs.

kristof >>> Ca fait beaucoup de questions tout ça.
Pour la 1ère, même réponse que pour GILET (si c'est possible).
Pour la 2ème, je mettrais une image de fond au marquee (qui n'est toujours pas standard depuis les 3 dernières minutes).
Et enfin pour l'image de fond à gauche et à droite, ça n'est pas directement possible, mais tu peux mettre une image de fond différente pour la colonne de gauche (dans #leftnav) et la colonne de droite (dans #rightnav)

marie >>> Je ne récupère rien, pas une bille, seulement la satisfaction de vous rendre accessible un peu de ma culture info. Si des gens veulent m'embaucher, je suis disponible ;-)

commentaire n° : 38 posté par : Francisek le: 23/07/2005 19:17:06

Merci des conseils données.
Cela m'a permis de démarrer sur les <marquee>.
J'ai fais un diaporama sympa en utilisant cette balise IE. Il me manque maintenant deux fonctionnalités pour compléter ma page en HTML / Javascript.

Comment réinitialiser le <marquee> ? (Redémarrer de droite à gauche à partir de la 1ère image) puis le
réinitialiser à l'inverse (Redémarrer de gauche à droite à partir de la dernière image). Si quelqu'un sait...

Pas si facile apparemment !

Francisek >>> Ca doit être possible par javascript, mais sous IE seulement.

commentaire n° : 39 posté par : malachite le: 25/07/2005 13:27:26

je viens de créer ds mon message d'accueil un texte défilant (avec qq difficultés pour le mettre dans un tableau) j'ai plusieurs questions:1/comment changer la couleur et la taille du texte 2/mettre une couleur de fond ds le tableau 3/faire défiler moins vite, 4/faire un lien sur un mot: faut-il passer par le code html? je précise que j'ai fait pas mal d'essais avant de te poser ces questions! merci à toi de m'éclairer et Bravo pour tout ce que tu nous rend capable de faire!!

commentaire n° : 40 posté par : mahina (site web) le: 29/07/2005 00:21:39

mahina >>> Et bien j'ai plusieurs réponses :
1+2+4/ il suffit de mettre le code HTML de ton contenu pour le mettre en forme.
3/ La vitesse de défilement est à entrer dans le champ correspondant.

commentaire n° : 41 posté par : Francisek le: 29/07/2005 10:36:43

euh.....pour le 3, j'ai changé la valeur du défilement de 1 à 1000... je ne vois rien changer! ; pour le 1,2,4, j'ai essayé dans la source de changer des valeurs de police (small, x-small..) rien ne change; qd on est dans la source, on ne peut surligner un mot pour mettre un lien, il est inactif.. moi pas douée tu sais!

commentaire n° : 42 posté par : mahina le: 29/07/2005 15:42:23

Salut, j'ai juste une demande.
Voila j'ai utilisé ta méthode il y a de cela un moment, mais j'aimerai faire une chose sans savoir si c'est réalisable en mode Confiance (toujours ce satané mode).
J'aimerai que ce qui défile (dans ce cas mon compeur) se stoppe au centre du module aprés être passé, et non pas qu'il continu encore et toujours à défiler.

Autre requête (lol), est-il possible de faire une boucle dans le défilement ?
Je veux dire est-il possible (là c'est pour mon texte de gauche) que ça forme une boucle pour pas qu'il y ai de gros blanc avant que tout soit passé !

Bon c'est peut être pas clair, mais merci quand même (il est vraiment vachement bien ton blog ! Je l'ai mis en lien pour la peine lol)

commentaire n° : 43 posté par : Papayou (site web) le: 29/07/2005 17:33:57

Mahina >>> Petite astuce : tu peux mettre en forme ton texte dans l'éditeur d'article de ton blog puis passer en mode source, copier l'intégralité et le coller dans le formulaire de mon article ;-)

commentaire n° : 44 posté par : Francisek le: 29/07/2005 18:12:28

Papayou >>> Pour ta première demande je ne pense pas. Pour le blanc, il faut voir avec différentes valeurs ce que ça donne.

commentaire n° : 45 posté par : Francisek le: 29/07/2005 18:17:28

Ca ne change rien !
J'ai modifier le scrolldelay (bien que je ne sache pas vraiment à quoi ça sert) mais ca ne change rien.
Le scrollamount lui en revanche je le laisse et je sais déjà que ca ne vient pas de la.
Donc j'avoue être limité dans mes choix .....

commentaire n° : 46 posté par : Papayou (site web) le: 29/07/2005 18:36:49

Erff !
Je viens de me dire que j'ai oublié de te demander un truc ...

Comment tu as fais pour mettre un logo/image dans la fenetre d'edition des commentaire (là ou on met notre nom, email, site et "se souvenir de moi") ?

commentaire n° : 47 posté par : Papayou (site web) le: 29/07/2005 18:39:02

Où est l'erreur? j'ai suivi tes conseil... et c'est tout le cadre qui défile... que dois-je ajouter ou supprimer pour qu'il n'y ait que le texte défilant? Mahina qui te remercie e toutes tes réponses!!

commentaire n° : 48 posté par : mahina (site web) le: 30/07/2005 10:10:15

qu'en penses-tu? merci!

commentaire n° : 49 posté par : mahina (site web) le: 30/07/2005 14:41:11

cette fois ci, je pense que mon message d'accueil est tout bon. Merci tout plein.... je suppose que tu as de la patience à revendre.... :)

commentaire n° : 50 posté par : mahina (site web) le: 01/08/2005 15:24:44