• Défilement automatique

    Voici un code HTML tout simple pour faire défiler des éléments (texte, images...) de façon automatique :


    Par exemple comme ça. Une fois arrivé au bout de la ligne, le défilement recommence
    CODE :

    <marquee direction="left" scrollamount="X" >CONTENU</marquee>


    "direction" indique le sens du défilement. Il peut prendre les valeur "left" (vers la gauche), "right" (vers la droite), "up" (vers le haut) et down (vers le bas)
    "scrollamount" indique la vitesse du défilement. Plus le nombre est grand, plus le défilement sera rapide. Dans l'exemple, j'ai utilisé scrollamount="3"


    Tags Tags : , ,
  • Commentaires

    1
    Shuchu Profil de Shuchu
    Dimanche 25 Septembre 2011 à 18:20

    xD Derien!
    Pourquoi tout le monde ne dit pas CHAMIMY mais CHAMIMNY? (je suis pas aveugle xD)

    2
    Dimanche 25 Septembre 2011 à 18:21

    Sorry ^^'

    3
    Shuchu Profil de Shuchu
    Dimanche 25 Septembre 2011 à 18:22

    Pas grave... c'est que une lettre (oui une lettre ou tout le monde se trompe xD)

    4
    EtoileSosso Profil de EtoileSosso
    Lundi 26 Septembre 2011 à 18:21

    Tiens je le cherchais justement ! :D

     

    5
    Mardi 27 Septembre 2011 à 10:40

    C'est sympa cet effet =)

    6
    Kiwako Elodie Profil de Kiwako Elodie
    Mardi 27 Septembre 2011 à 19:14

    Merci Chamimy!

    7
    Kiwako Elodie Profil de Kiwako Elodie
    Mardi 27 Septembre 2011 à 19:14

    Mais le souci est le deuxième effet il est beaucoup trop rapide ^^"

    8
    Vendredi 7 Octobre 2011 à 13:26

    Peut-on régler la vitesse ?

    9
    Vendredi 7 Octobre 2011 à 15:27

    Affirmatif avec scrollamount qui fixe de combiens de pixels on se déplace et scrolldelay qui fixe la durée entre deux affichages. Exemple:

    <marquee direction="up" scrollamount=1 scrolldelay=5>Plus lentement avec 1 pixel a la fois et delay de 5</marquee>

    Marquee permet aussi plus de réglages (couleurs, nombre de défilements etc..

    10
    EtoileSosso Profil de EtoileSosso
    Vendredi 7 Octobre 2011 à 16:48

    Merci Papasti. ^^

    11
    Samedi 8 Octobre 2011 à 21:45

    merci beaucoup pour l'info =)

    12
    Vendredi 14 Octobre 2011 à 17:59

    J'ai pas trop pigé mais merci xD

    13
    SonnyNath
    Mardi 25 Octobre 2011 à 15:04

    Pour moi ça ne fonctionne pas ! En tout cas le premier. Faut-il marquer "marquee" ou le remplacer ?? Si il faut le remplacer peux-tu me dire par quoi STP.

    14
    Samedi 12 Novembre 2011 à 14:22

    et si on veut mettre des images à la place d'un texte?

    15
    Chamimy not connexio
    Samedi 12 Novembre 2011 à 14:34
    J'ai pas essayermais... Tu mets les images, va dans l'icone HTML, cherche les balises <img*> puis quand il y a le tout premier <img*> a gauche, tu met <marquee*> puis a la fin le tout dernier </img*> tu met le </marquee*> sans les "*"
    16
    Dimanche 13 Novembre 2011 à 12:38

    Ce qui fait bouger, c'est les balise <marquee>

    Donc tu dois tout mettre entre <marquee> et </marquee>

    17
    Lundi 28 Novembre 2011 à 19:51

    Sinon on peut faire vers le bas ; remplacer up par down

    18
    Lundi 28 Novembre 2011 à 21:06

    Yep =)

    Merci pour l'astuce =D

    19
    Lundi 28 Novembre 2011 à 21:08

    d'rien :3

    20
    Mardi 29 Novembre 2011 à 08:10

    Faites tout de même attention à la balise marquee. En effet, ce n'est pas une balise HTML standard mais une balise créée par Microsoft. Elle fonctionnera donc bien dans IE mais pas forcément dans Firefox ou Chrome. Donc pensez à regarder votre blog dans les différents navigateurs.

    21
    Mardi 29 Novembre 2011 à 20:23

    pour ma part j'utilise chrome et j'viens de regarder sur mozilla : sa marche dans les 2 cas.

    22
    Novalia
    Samedi 24 Décembre 2011 à 15:28

    Je cherchai ce truc partout et je l'avais pas repérer ">_>

    23
    Jeudi 29 Décembre 2011 à 14:48

    salut :)

    dabord, merci pour le code mais j'ai un probleme avec: 

    quand j'edite mon orticle pour entrer le code html, et que j'enregistre, ca ne fonctionne pas sur l'article mais DANS l'edition

    est ce que vous me comprenez? ^^' en gros ca fonctionne que dans l'edition mais pas sur l'article 

    vous pouvez m'aider? *help xD*

    24
    EtoileSosso Profil de EtoileSosso
    Lundi 2 Janvier 2012 à 13:41

    Marche pas, ça fait juste un gros espace

    25
    Dimanche 29 Janvier 2012 à 11:38

    merci je cherchais le code justement ^^

    26
    Lundi 20 Février 2012 à 22:03

    J'ai kifferrrr!!! LE exemple qui bouuuuuuuuuuuuuuuuge XD

    j'atais MDR

    bref Passons

    Merci beaucoup pour l'aide^^

    27
    Lundi 20 Février 2012 à 22:21

    De rien =)

    28
    Lundi 12 Mars 2012 à 17:59

    comment on fait pour que sa soit une image qui bouge ??????

    29
    Lundi 12 Mars 2012 à 18:03

    Tu met une image à la place du texte:

    <marquee><img src="ULR DE IMAGE"/></marquee>

    30
    Lundi 12 Mars 2012 à 18:13

    dac merci

    31
    Mitsukø Profil de Mitsukø
    Samedi 9 Juin 2012 à 20:21

    Merci pour ton code ^^

    32
    Cheal
    Mercredi 27 Juin 2012 à 19:53

    est ce que l'on peut remplacer texte par des boutons?

    33
    Cheal
    Jeudi 28 Juin 2012 à 09:17

    j'ai essayé mais sa marche pas...

    34
    Jeudi 28 Juin 2012 à 13:32

    Tu as mis quoi comme code?

    35
    Cheal
    Jeudi 28 Juin 2012 à 13:36

    J' ai mis ce code :<marquee direction="up" scrollamount="2"><a href="http://loreleimanga.eklablog.fr/accueil-c17884232#"><img src="http://data0.eklablog.fr/loreleimanga/mod_articles17884232_4fabf0a096116.jpg?6745" alt="Accueil" width="212" height="131" /></a><a href="http://kiwwi-world.eklablog.com/"><span style="color: #ffffff;"><img src="http://data0.ek.la/ri-chii/mod_article38559527_4f3121e49059a.png?4040" alt="" width="88" height="31" /></span></a></marquee></p>
    <p><a title="Bouton de blog" href="http://le-bai-san.eklablog.com/accueil-c18024623" target="_blank"><img title="Bouton de blog" src="http://image.blingee.com/images19/content/output/000/000/000/7b1/769598801_399678.gif" border="0" alt="Bouton de blog" width="160" height="53" /></a></p>
    <p><span style="color: #ffffff;">&nbsp;&nbsp; <a href="http://my-world.ek.la/accueil-c709652"><span style="font-size: medium; color: #ffffff;"><img src="http://data0.eklablog.fr/saphyr2/mod_article45812456_4f833910869e2.gif?9501" alt="Boutons de blog du 09/04" /> </span></a></span></p>
    <p><span style="color: #ffffff;"><a href="http://bakaland.eklablog.com/"><span style="color: #ffffff;"><img src="http://data0.eklablog.com/reimu-world/mod_article46036529_4f9926064575a.png?2303" alt="" width="88" height="31" /></span></a></span></p>
    <p><a href="http://fairyxlylouxtail.eklablog.com/"><img src="http://img15.hostingpics.net/pics/340249PourxFairy.png" alt="" width="219" height="155" /></a></p>
    <p><a href="http://sakura-akatsuki.kilariblog.com/"><span style="color: #ffffff;"><img src="http://oi43.tinypic.com/rbzacm.jpg" alt="" /></span></a></p>
    <p><a href="http://manga-time.eklablog.com/"><span style="color: #ff9900; font-size: medium;"><strong><img src="http://data0.eklablog.com/manga-time/perso/one%20piece/bouton.gif" alt="" width="193" height="97" /></strong></span></a></marquee>

    ET il n'y a que les deux premieres image qui bouge

    36
    Jianaiko Profil de Jianaiko
    Mercredi 21 Novembre 2012 à 19:48

    Hello en fait j'aurais une question, j'ai vu qu'on pouvait faire des texte qui défile et quand on passe la souris, il s'arrête j'ai trouvé le code <marquee onmouseover="this.stop()" onmouseout="this.start()">Ton texte</marquee> qui marche quand je le mets mais quand je clique enregistrer, l'effet ne se met pas est ce que quelqu'un sait pourquoi ?

    37
    Vendredi 1er Mars 2013 à 00:46

    Comment peut-on ajouter un lien à l'image que l'on a mit dans le défilant ?

    38
    Vendredi 1er Mars 2013 à 17:56

    Bas ça marche pas é_è

    39
    Sweety♥ Profil de Sweety♥
    Lundi 3 Juin 2013 à 18:33

    C'est trop cool

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    40
    Crow*
    Mercredi 26 Juin 2013 à 10:00

    Je n'arrive pas à faire des images qui bougent

    41
    Novalia
    Mercredi 26 Juin 2013 à 10:26

    Donne-moi le code que t'as mis, peut-être que je pourrais t'aider ^^

    42
    Crow*
    Mercredi 26 Juin 2013 à 11:51

    <p><marquee direction="up" scrollamount="X"><img alt="http://ekladata.com/bCnRlNkPly4yVNzILXyKSj5XIQI.png" /></marquee></p>

    C'est pour mettre le bouton d'un partenaire, mais il y a juste un cadre, l'image n'apparait pas

    43
    Novalia
    Mercredi 26 Juin 2013 à 12:33

    Essaye de mettre ça : (en fait, il fallait inserer l'image autrement que par le htlm, c'est plus simple)

    <p><marquee direction="up" scrollamount="X"><img src="http://ekladata.com/bCnRlNkPly4yVNzILXyKSj5XIQI.png" alt="D" width="120" height="65" /></marquee></p>

    44
    Crow*
    Mercredi 26 Juin 2013 à 14:22

    ça marche ! Merci beaucoup

    45
    Novalia
    Mercredi 26 Juin 2013 à 17:13

    De rien ^^

    46
    Suki Profil de Suki
    Mardi 16 Juillet 2013 à 15:19

    Bonjour, je me demandais si vous savez si avec le code on peut mettre des liens sur des images ou même sur du texte ?

    Merci d'avance et désoler du dérangement.

    47
    Mercredi 17 Juillet 2013 à 00:22

    Bien sur

    <a href="LIEN">TEXTE OU IMAGE</a>

    48
    Suki Profil de Suki
    Mercredi 17 Juillet 2013 à 14:21

    Merci ! :D

    49
    Vendredi 25 Octobre 2013 à 16:38

    Scroll-mammouth 8D <--- il fallait que je la dise cette bêtise XD

    Bravo, ce blog est très complet!

    50
    Vendredi 3 Janvier 2014 à 14:00

    Bonjour,

    Pourrais tu m'aider, je voudrais  mettre mon avatar commentaire auteur à gauche, et laisser celui des visiteurs à droite.

    Je viens d'essayer un code trouvé sur woua.eklablog {.commentavatar  float: left;} . ça me met à gauche, mais moi je voudrais juste l'auteur à gauche et en plus je ne vois pas comment régler la distance du texte par rapport  à l'avatar.

    Donc si tu as un code à m'offrir j'en serai ravie.

    D'avance merci

    voeux

     

    51
    Samedi 4 Janvier 2014 à 18:05

    Merci de poser vos questions sous l'article approprié... Si vous ne le trouvez pas, vous pouvez utiliser la FAQ

     

    .comment_admin .commentavatar {float: left; /*place l'avatar à gauche*/
              padding-left : Xpx; /*espacement du texte par rapport au bord gauche*/
    }

    52
    Samedi 4 Janvier 2014 à 19:09

    Bonsoir Nagalia,

    Merci pour le code et excuses moi pour la question posée au mauvais endroit.

    53
    Samedi 4 Janvier 2014 à 19:52

    Pas de problème :)

    54
    Lundi 6 Janvier 2014 à 17:25

    bien ce système mais j'arrive pas et je te jure j'suis pas blonde bon pas grave j'essayerai de nouveaux bisous Dali j'espère que tu as bien commencé l'année

    55
    Lundi 20 Janvier 2014 à 18:07

    Oui je l'ai fait , cela fonctionne..........Mais un bémol, ça écrit trop petit.............comment changer la taille ??

    56
    Mercredi 22 Janvier 2014 à 15:38

    Es ce qu'il y a un code CSS pour ce code, je voudrais changé le fond, la taille de defilement a droite pour que sa reste dans l'header. Ou autre.

    57
    Jeudi 23 Janvier 2014 à 23:33

    @Ghislaine : 
    <marquee scrollamount=X scrolldelay=X><span style="font-size: Xpx"> TEXTE </span></marquee>

    Modifie la valeur de X pour changer la taille du texte

    @MissShouky : Tout simplement marquee ;)

    CSS :

    marquee { display : block;
              propriété : valeur;
    }

    58
    Vendredi 24 Janvier 2014 à 09:14

    Merci 

    59
    Lundi 16 Juin 2014 à 17:57

    Merci ^w^

    60
    Samedi 21 Juin 2014 à 21:30

    et si on veut que ce soit une liste d'image qui défile 

    c'est pour les boutons de mes partenaires pour qu'il défile 

    61
    Dimanche 22 Juin 2014 à 14:29

    Tu met une image à la place du texte:

    <marquee><img src="ULR DE IMAGE"/></marquee>

    62
    Mercredi 25 Juin 2014 à 14:08

    ça donne une image qui défile mais j'aimerais que se soit une série d'image qui défile je dois répéter le code  ?

    63
    Mercredi 25 Juin 2014 à 14:11

    <img src="ULR DE IMAGE"/>

    est le code pour insérer une image en HTML. Il faut le répéter pour chaque nouvelle image

    64
    Mercredi 25 Juin 2014 à 14:18

    ok  les image défilerons quand même ou resterons fixe ?

    65
    Mercredi 25 Juin 2014 à 14:21

    Tout ce qui se trouve entre les balises <marquee> va défiler. Dedans, tu peux organiser ton code comme tu veux ;)

    <marquee><img src="ULR DE IMAGE"/> Du texte du texte... et <a href="#">un lien</a>. Et encore des images <img src="ULR DE IMAGE"/> <img src="ULR DE IMAGE"/></marquee>

    Toute la partie en bleu défile, que ce soit du texte, des liens ou des images

    66
    Mercredi 25 Juin 2014 à 14:29

    <marquee><img src="http://ekladata.com/jgELY7KravVQ0z0kyyg15KUSY0E@324x215.jpg"/><img src="http://ekladata.com/SQp_z-_nfQGUwkH8_b3WRsS3ty4@221x166.jpg"/><img src="http://ekladata.com/Qjr_SWShbHdx4MnxSdi-CKympS0@100x100.gif"/></marquee>

    ce dode la pourrait t'il marcher ou je suis obliger de laisser le  <a href="#">un lien</a>

    67
    Mercredi 25 Juin 2014 à 14:42

    <a href="#">un lien</a>

    est simplement le code pour les liens. Si tu ne veux pas mettre de lien, il suffit de l'enlever. Il n'a aucune influence sur le défilement

    68
    Mercredi 25 Juin 2014 à 14:52

    okay je me disais :) aussi merci pour ton aide 

    69
    Mercredi 24 Septembre 2014 à 00:33

    super se blog

    70
    Lundi 27 Octobre 2014 à 16:29

    Bonjour, comment fait-on pour qu'il n'y ai pas d’espace quand le défilement se termine ? pas sur de m'être bien expliqué mais bon x))

    Voilà bonne journée ._.

    71
    Samedi 27 Décembre 2014 à 22:08

    Merci pour ce css ^^

    72
    Lundi 23 Février 2015 à 06:23

    Je profite de vos lumières pour poser une question. Voici un code html de tirage aléatoire de réponses, comment puis-je changer la taille des boutons, pour que par exemple une phrase toute entière puisse tenir dans la réponse sans devoir faire défiler/

    Merci la foule !

    1. <input type="button" value="Nouvelle phrase" onClick="populate();">
    2. <input type="text" value="" id="tt"/>
    3. <a href="" id="link">link</a>
    4. <script type="text/javascript" charset="utf-8">
    5. function populate () {
    6.     var obj=document.getElementById("tt" ),
    7.     link=document.getElementById("link" ),
    8.     aleatoire=Math.floor(Math.random()*5);
    9.     switch(aleatoire){
    10.     case 0:obj.value="phrase1";link.setAttribute("href","http://google.be" );break;
    11.     case 1:obj.value="phrase2";link.setAttribute("href","http://google.fr" );break;
    12.     case 2:obj.value="phrase3";link.setAttribute("href","http://google.com" );break;
    13.     case 3:obj.value="phrase4";link.setAttribute("href","http://google.de" );break;
    14.     case 4:obj.value="phrase5";link.setAttribute("href","http://google.cn" );break;
    15.     }
    16. }
    17. </script>
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :