AIDEZ MOI : texte defilant html ?

vrompir -  
 TigerJim1994 -
Salut,
voila y' a un truc que j'aimerai faire mais je sais pas du tout comment, je pense qu'il fo du javscript ou quelque chose du genr mais j'en suis pas sure ...
j'explique

j'ai une image dans un layer et un autre layer sur cette image qui contient du texte....en bas de l'image se trouve 2 petits boutons, (haut/bas) qui permettent de faire defiller le texte qu'il y a dans le second layer de texte comme une scrollbar ...

je sais pas comment faire et toute aide serait la bienvenue ...

14 réponses

  1.
    PhP Messages postés 1774 Statut Membre 606
     
    Salut vrompir,

    J'suis pas sûr d'avoir tout compris ...

    Cependant voici un ex en Javascript qui répondra peut être à tes besoins.
    Peut être JAVA ou FLASH seraient ils mieux appropriés mais comme je ne connais ni l'un ni l'autre ...

    Copie ce qui suit dans un fichier html sur ton PC et test avec IE

    <html>
    <head>
    <style>

    .stylecadre
    {
    position:absolute;
    overflow:hidden;
    background-color:#E0E0E0;
    }

    .styletexte
    {
    position:absolute;
    left:5px;
    top:0px;
    overflow:hidden;
    }

    .perso
    {
    font-family:arial;
    font-weight:bold;
    font-size:10pt;
    color:#0000BB;
    }
    </style>
    <script language="Javascript">
    <!--
    var fenetre=null

    // Object qui va référence un layer <DIV> HTML positionner de manière absolue de préférence
    function DivObject(id)
    {
    this.ref=window.document.getElementById(id);

    }

    // Définir les dimensions de l'object DIV référencé
    function divObject_setSize(szX,szY)
    {
    this.setWidth(szX)
    this.setHeight(szY)
    }
    DivObject.prototype.setSize=divObject_setSize

    // Définir la position absolue de l'object DIV référencé
    function divObject_setPos(x,y)
    {
    this.setX(x)
    this.setY(y)
    }
    DivObject.prototype.setPos=divObject_setPos

    // Pas utilisé ...
    function divObject_setClip(x,y,szX,szY)
    {
    this.ref.style.clip="rect("+y+","+szX+","+szY+","+x+")";
    }
    DivObject.prototype.setClip=divObject_setClip

    // Définir la largeur de l'object DIV référencé
    function divObject_setWidth(szX)
    {
    this.ref.style.width=szX+"px"
    }
    DivObject.prototype.setWidth=divObject_setWidth

    // Définir la hauteur de l'object DIV référencé
    function divObject_setHeight(szY)
    {
    this.ref.style.height=szY+"px"
    }
    DivObject.prototype.setHeight=divObject_setHeight

    // Modifier la position horizontale du delta passé dans dx
    function divObject_setdX(dx)
    {
    dx+=this.ref.offsetLeft;
    this.ref.style.left=dx+"px"
    }
    DivObject.prototype.setdX=divObject_setdX

    // Modifier la position verticale du delta passé dans dy
    function divObject_setdY(dy)
    {
    dy+=this.ref.offsetTop;
    this.ref.style.top=dy+"px"
    }
    DivObject.prototype.setdY=divObject_setdY

    // Définir la position horizontale de l'object DIV référencé
    function divObject_setX(x)
    {
    this.ref.style.left=x+"px"
    }
    DivObject.prototype.setX=divObject_setX

    // Définir la position verticale de l'object DIV référencé
    function divObject_setY(y)
    {
    this.ref.style.top=y+"px"
    }
    DivObject.prototype.setY=divObject_setY

    // Création des objects nécessaire au chargement
    function load()
    {
    // D'abord la zone cadre qui va servir de support à la zone de texte
    zonecadre=new DivObject("cadre");
    // On définit ensuite les dimensions de la zone de cadres
    zonecadre.setSize(180,250);
    // Puis sa position
    zonecadre.setPos(10,100);

    zonetexte=new DivObject("texte");
    }

    // Tout le code Javascript qui suit ne sert que pour le scroll automatique ...

    // name : le nom de la variable javascript déclarée comme objet de type DivObject
    // direction : "UP", "DOWN", "LEFT" ou "RIGHT"
    // start : mettre à zéro (pas utilisé)
    // end : valeur qui met fin au scrolling lorsque la coordonnée x ou y de l'objet DIV référencé atteind ou dépasse cette valeur
    // step : pas entre 2 déplacements
    // time : durée en milliseconde entre 2 appels au timer
    function divObject_scrollStart(name,direction,start,end,step,time)
    {
    // Si déjà un timer en cours on sort ..
    if (this.timerMove) return;

    this.step=step
    this.start=start
    this.end=end
    this.name=name
    this.time=time
    this.timerMove=null
    this.direction=direction

    // Lance le timer
    if (!this.timerMove) this.timerMove=setInterval(this.name+".move()",this.time);
    }

    DivObject.prototype.scrollStart=divObject_scrollStart

    function divObject_move()
    {
    stop=true

    switch (this.direction)
    {
    case "UP" :
    if (this.ref.offsetTop >= this.end)
    {
    stop=false
    this.setdY(-this.step)
    }
    break;

    case "DOWN" :
    if (this.ref.offsetTop <= this.end)
    {
    stop=false
    this.setdY(this.step)
    }
    break;

    case "LEFT" :
    if (this.ref.offsetLeft >= this.end)
    {
    stop=false
    this.setdX(-this.step)
    }
    break;

    case "RIGHT" :
    if (this.ref.offsetLeft <= this.end)
    {
    stop=false
    this.setdX(this.step)
    }
    break;
    }

    if (stop) this.scrollStop()
    }
    DivObject.prototype.move=divObject_move

    function divObject_scrollStop()
    {
    if (this.timerMove) clearInterval(this.timerMove);
    this.timerMove=null
    }
    DivObject.prototype.scrollStop=divObject_scrollStop

    // -->
    </script>

    </head>
    <body onload="load()">

    <form>
    <table>
    <tr>
    <td>
    <fieldset><legend>Remote control</legend>
    <input type="button" value="Gauche" onclick="zonetexte.setdX(-10)">
    <input type="button" value="Droite" onclick="zonetexte.setdX(10)">
    <input type="button" value="Haut" onclick="zonetexte.setdY(-10)">
    <input type="button" value="Bas" onclick="zonetexte.setdY(10)">
    <input type="button" value="R.a.z" onclick="zonetexte.setPos(5,0)">
    </fieldset>
    </td>
    <td valign=center>
    <fieldset><legend>Défilement auto</legend>
    <input type="button" value="Start" onclick="zonetexte.scrollStart('zonetexte','UP',0,-140,2,100)">
    <input type="button" value="Stop" onclick="zonetexte.scrollStop()">
    </fieldset>
    </tr>
    </table>
    </form>

    <div id="cadre" class=stylecadre>&nbsp;
    <div id="texte" class=styletexte>
    <p class=perso nowrap>
    Salut vrompir<br><br>
    Ce texte est contenu dans un layer appelé "texte" lui même contenu dans un autre layer (en gris) appelé "cadre".<br>
    Le contenu du layer "texte" ne peut pas sortir de la zone délimitée par le layer "cadre" qui peut très bien être une image.<br><br>
    Clique sur <font color=#FF0000>[Start]</font> pour faire automatiquement défiler ce texte vers le haut.<br><br>
    N'oublie pas de cliquer ensuite sur [Stop] pour mettre fin au timer ...<br><br>
    Php<br><br>
    [[ The Truth is Out There ]]</p>
    </div>
    </div>

    </body>
    </html>

    Si tu as un pb par rapport au code, laisse un msg ;:)

    @+
    Philippe

    [[  The Truth is Out There   ]]
    3
  2. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    JE REPETE "MARQUEE" n existe pas

    il faut du javascript http://www.editeurjavascript.com/scripts/search.php?asked=texte+defilant&dest=1

    mais bon puisque plus on dis "ne faite pas ca " plus il y en as qui font le contraire !!!

    RAD
    2
  3. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    De toute les façons c'est microsoft qui detient les 90%du marche informatique
    alors marche avec leur language.

    encore une belle connerie !!!!!

    microsoft n est pas proprietaire du web !!!!

    et 90% des particuliers on microsofts mais cela ne veux pas dire que tous utilise la m....de Internet explorer pour naviguer !!!

    et ce n est pas microsoft qui decide des standart web !! et heureusement !!

    RAD
    2
  4. Sophie
     
    J'ai beaucoup plus facile ! Sans javascript ..

    <marquee>Texte ici</marquee>
    1

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. LAM
     
    j te remercie , mais ce que je veux c 'est ca , je veux un titre par exemple "la france" qu m 'affiche sur la page d'accueil lettre par lettre comme suit: l puis a puis f puis r puis.....
    ce que ta proposé on peut l faire avec la balise marquee
    j espere ta d' autres idees j te remercie bcq
    1
  7. EIN
     
    Désolé de te contredire mais "MARQUEE" fonctionne très bien sous firefox!
    Faut arrêter de prendre Sun pour des débutants sérieux :-(
    1
  8. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    SALUT
    J'ai beaucoup plus facile ! Sans javascript ..

    <marquee>Texte ici</marquee>

    sur IE :-)))

    je rapel que la balise "MARQUEE" n existe pas !!!!!!!!!!!! c est une invention microsoft ( ou netscape ? je me rapel plus )!!

    donc utilisation js ou java ou flash !!

    RAD
    0
  9. monkeydgawel
     
    la balise <marquee> fonctionne aussi sous firefox

    mais comment faire pour que le mouvement s'arrete quand on passe la souris dessus???
    0
  10. zangre01
     
    utulise marquee un point c'est tout

    <marquee>ton texte ici</marquee>
    et ca marche.
    De toute les façons c'est microsoft qui detient les 90%du marche informatique
    alors marche avec leur language.
    0
  11. milou rad
     
    toi non plus RAD. ravale ta langue et utilise donc marquee.
    0
  12. Flow31- Messages postés 90 Statut Membre 10
     
    Coucou,

    Je sais que c'est pas du tout le BON sujet, mais je préfère me faire engueuler(me tuer pas quand même) que créer un topic (au pire je le créé quand même...)

    Je ne peux pas utiliser marquee, comment je fais? parce que là où je veux l'utiliser, c'est sur facebook(désolé) et le HTML ne marche pas :(

    Merci d'avance :D
    0
  13. Flow31- Messages postés 90 Statut Membre 10
     
    Sun = ????

    Ensuite le site n'est PAS en [b]HTML/b
    Que j'utilise firefox ou non, ce n'est pas la question, une page non html ne peut pas affiché "marquee" car celui ci appartient au langage HTML...
    Tu ne m'as pas compri !
    0
    1. justedepassage
       
      Et bé.... que de bêtises "marquées" :D

      En effet, si vous voulez mettre un site-torchon en ligne, utilisez-donc la balise marquee, vous en êtes libre. Cependant, comme le dit RAD, ce n'est pas un standard. Donc, faites ce que vous voulez pour vous mais ne conseillez pas ces absurdités pour d'autres personnes. Les standards du Net, les normes W3C, le HTML Strict, etc, sont des normes qui permettent à un site d'être accessible à une multitude d'utilisateurs. Vous devez vraiment avoir de la veine de ne pas être malvoyant sinon vous comprendrez vraiment ce qui est écrit dans ce message...

      Bref, utilisez la balise mais ne venez pas vous plaindre ensuite si l'accessibilité de votre site est décrié par la suite. C'est ce genre de détails et de possibilités offertes aux internautes qui différencient un site d'amateurs d'un site professionnel ou d'aspect professionnel.

      Au final, il reste la solution du javascript (mais gare aux utilisateurs l'ayant désactivé) ou en flash (mais ce point aussi est difficile au niveau de l'accessibilité).

      De plus, dans le Web 2.0, le fait de respecter les normes permet d'être ajouté dans les petits papiers des internautes qui prendront des nouvelles de votre site via des flux ou des outils récupérant les infos pour suivre l'actu proposée par le site.
      0
    2. justedepassage
       
      >Flow31
      >Je ne peux pas utiliser marquee, comment je fais? parce que là où je veux l'utiliser, c'est sur facebook(désolé)
      >et le HTML ne marche pas :(

      Facebook doit peut-être permettre uniquement du BBcode, un code allégé en somme. C'est utilisé pour éviter les mauvaises actions que l'on pourrait réaliser avec du code HTML. Donc, il est impossible de faire défiler du texte en BBcode tant que ce n'est pas géré dans ce "langage".
      0
  14. elodie
     
    jaimerai faire un texte qui defile sur le fon dune musique mais je nai aucune idee de comprend faire jaimerai de l'aide
    merci de me rep le plu vite possible
    0
  15. TigerJim1994
     
    Pour le BBcode la balise (si elle est dans les memes normes que les forums forumactifs) est [scroll]/scroll
    0