• Défiler texte images

    qu'est-ce que c'est ?

    Bon, je pense que tout le monde connait le verbe défiler donc je ne vais pas donner sa définition ici.
    Néanmoins, voici deux exemples de directions de défilements qui vous sauront possibles au cour de ce tutoriel.

    Mon texte defile de droite a gauche
    Mon texte defile de gauche a droite

    On peut bien évidemment faire défiler de haut en bas et de bas en haut ainsi que remplacer le texte par des images.


    comment faire ?

    Tout d'abord vous ouvrez le module ou l'article dans lequel vous souhaitez faire défiler votre texte ou vos images, mettez votre texte ou vos images en question de la manière que vous voulez puis cliquez sur le bouton HTML de votre article afin de rajouter les balises qui permettront le défilement dont il est question.

    Observez votre code, si vous n'avez pas changé l'alignement par défaut de votre texte ou images vous devriez avoir un <p> au début et à la fin </p>, p c'est pour paragraphe. Lorsque vous allez ajouter le code qui sera donné plus loin, vous devrez le mettre juste après le premier <p> et tout de suite avant le dernier </p> car si votre défilement est en dehors du paragraphe, et bien votre paragraphe ne défilera pas, logique.

    Le code HTML de base utilisé pour le défilement est celui-ci qui se placera directement après <p>

    <marquee direction="*" scrollamount="**">

    <marquee> c'est la balise par défaut utilisée pour les défilements, ci-dessus elle est suivit de direction qui représente justement la direction de votre contenu, pour définir sa direction vous remplacerez * par, selon votre choix, right pour aller vers la droite, left pour aller vers la gauche, up pour aller vers le haut ou down pour aller vers le bas. Enfin, l'attribut scrollamount détermine la vitesse de votre défilement, ** doit être remplacé par un chiffre qui fixera le nombre de pixels qu'il y aura entre chaque déplacements, plus le chiffre sera grand, plus le déplacement sera rapide et inversement.

    Il faut également écrire cette fin de code qui permettra de fermer la balise et se placera juste avant </p>

    </marquee>

     

    Ce tutoriel touche à sa fin, si vous avez bien suivit et compris le principe, vous devriez normalement avoir le résultat souhaité à la base. Toutefois si vous rencontrez des problèmes, je vous invite à m'en faire part dans les commentaires, je vous répondrai le plus rapidement possible.


    Tags Tags : , , , ,
  • Commentaires

    23
    Vendredi 11 Juillet 2014 à 11:50

    Merci pour le code ^^

    22
    Mercredi 8 Mai 2013 à 13:08

    ok ^^

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    21
    Mardi 7 Mai 2013 à 20:35

    Non il doit y avoir un problème dans certains codes je pense, car ce n'est pas normal. Si cela a marché sur certains blogs alors il n'y a pas de raison pour que ça ne fonctionne pas sur d'autres. :o

    20
    Mardi 7 Mai 2013 à 19:35

    j'ai un petit problème, sur certains de mes blogs sa marche et sur mon nouveau sa ne marche pas, est-ce que tu c'est pourquoi ?

    19
    Kiwaki
    Mardi 19 Mars 2013 à 21:34

    Oh , merci beaucoup ! Ca marche super bien , merci encore *O* .

    18
    Mardi 19 Mars 2013 à 20:44

    Il y avait quelques petites erreurs dans ton code, rien de bien grave, le re-voilà :
    <p>Mes Partenaires :<br /><br /><marquee direction="down" scrollamount="13"><a href="http://eliazano.eklablog.com/" target="_blank"><img src="http://ekladata.com/tHMerrtRhdU-wIeWTpI4akT7-Bs.gif" alt="partenariat" /></a><br /><br /><a href="http://like-angel.id.st/partenaire-a61411227#" target="_blank"><img src="http://ekladata.com/IEIUpDDB8O-feEMYvOZMrIuAkts.png" alt="Partenaire ? ✿" /></a><br /><br /><a href="http://japan-world.eklablog.com/" target="_blank"><img style="width: 211px; height: 112px;" src="http://ekladata.com/pNUS5eSp5im1rv6kfcNQ1y5K1fk.gif" alt="Partenaire ?" width="211" height="110" /></a><br /><br /> <a href="http://mangatest.eklablog.com/" target="_blank"><img style="width: 189px; height: 97px;" src="http://ekladata.com/tuT2Jex3O9FVBSgy7hxVS_1B2nE.gif" alt="partenariat" width="150" height="97" /><br /><br /></a> <a href="http://utopiachart.lo.gs/" target="_blank"><img src="http://ekladata.com/63zpUHCsYvdGDTJhWs1jLJcZF2k.png" alt="Partenariat" /></a></marquee></p>

    17
    Kiwaki
    Lundi 18 Mars 2013 à 20:51

    Konni' Moi j'ai un petit problème . J'ai mis se code :

    <p>Mes Partenaires :</p>
    <p>&nbsp;</p>
    <p><marquee direction="down" scrollamount="13"><a href="http://eliazano.eklablog.com/" target="_blank"><img src="http://ekladata.com/tHMerrtRhdU-wIeWTpI4akT7-Bs.gif" alt="partenariat" /></a>&nbsp;&nbsp; <a href="http://like-angel.id.st/partenaire-a61411227#" target="_blank"><img src="http://ekladata.com/IEIUpDDB8O-feEMYvOZMrIuAkts.png" alt="Partenaire ? ✿" /></a>&nbsp;</marquee></p>
    <p>&nbsp;</p>
    <p><a href="http://japan-world.eklablog.com/" target="_blank"><img style="width: 211px; height: 112px;" src="http://ekladata.com/pNUS5eSp5im1rv6kfcNQ1y5K1fk.gif" alt="Partenaire ?" width="211" height="110" /></a>&nbsp;&nbsp; <a href="http://mangatest.eklablog.com/" target="_blank"><img style="width: 189px; height: 97px;" src="http://ekladata.com/tuT2Jex3O9FVBSgy7hxVS_1B2nE.gif" alt="partenariat" width="150" height="97" /></a></p>
    <p>&nbsp;</p>
    <p><a href="http://utopiachart.lo.gs/" target="_blank"><img src="http://ekladata.com/63zpUHCsYvdGDTJhWs1jLJcZF2k.png" alt="Partenariat" /></a></p>

    Et le problème c'est qu'il n'y as que les deux première images qui défilent et non les autres !

    Merci pour le tutos quand même :) .

    16
    Vendredi 13 Juillet 2012 à 15:21

    Thankk youu ! 

    15
    Shuchu Profil de Shuchu
    Mercredi 16 Mai 2012 à 15:21

    Merci :D

    14
    Samedi 31 Mars 2012 à 17:34

    Merci :)

    13
    Lundi 13 Février 2012 à 20:07

    je n'y arrive pas :'(

    12
    Samedi 31 Décembre 2011 à 16:11

    Merci beaucoup!Moi sa a tres bien marcher!

    11
    Dreamy Girl Profil de Dreamy Girl
    Vendredi 30 Décembre 2011 à 20:57

    j'ai réussi !!!

    10
    Dreamy Girl Profil de Dreamy Girl
    Vendredi 30 Décembre 2011 à 20:49

    Je n'y arrive pas :(

    Je t'en suppli au lieu de mettre mille code a assembler tu peux en mettre 1 seul et même code qui marche ????????

    J'éssai depuis 30mn

    9
    Lundi 24 Octobre 2011 à 12:36

    Merci,j'ai enfin réussi!<3

    8
    cocochan33
    Dimanche 23 Octobre 2011 à 19:42

    merci beaucoup Mikuru pour tous tes supers tutos *o*

    7
    Misu Sato
    Samedi 15 Octobre 2011 à 17:05

    merci je vais voir sa ^^

    desolée pour le derangement

    6
    Samedi 15 Octobre 2011 à 15:03

    J'ai vu ton blog mais je ne vois pas quel est le problème. :O
    Si c'est la taille du module qui te gène tu peux facilement la réduire dans les paramètres du thème normalement.

     

    5
    Misu Sato
    Samedi 15 Octobre 2011 à 12:36

    Coucou Mikuru ,

    mon resultat est super sauf que , le module prend beaucoup de place !

    Je t'invite a voir mon blog ( je te met la perm 3 ) !

    J'espere que tu arrivera a resoudre ce probleme

    Biz  M.Sato

    4
    Dimanche 28 Août 2011 à 18:00

    Y a pas de quoi. ^-^

    3
    Dimanche 28 Août 2011 à 17:59
    Oki ! Sankyuu >w<
    2
    Dimanche 28 Août 2011 à 17:56

    Normalement tu devrai les mettre dans ton article avant de les encadrer par les balises <marquee></marquee>, ça t'évitera de devoir faire ça dans le HTML. Néanmoins, si tu veux tout faire au HTML, tu dois insérer ce code entre les balises <marquee></marquee> :
    <marquee direction="
    *" scrollamount="**"><img src="urldetonimage"></marquee>

     

    1
    Samedi 27 Août 2011 à 21:26

    Super ! Pour les images on doit mettre l'URL ?

    Vous devez être connecté pour commenter