Texte défilant ( boutons : arrêt - pause - avant - arrière et feuille de style ) ( à upgrader à volonté )

Soyez le premier à donner votre avis sur cette source.

Vue 23 267 fois - Téléchargée 1 313 fois

Description

Un texte qui défile de bas en haut avec un bouton d'arrêt et un bouton continuer.......
Attention ce script ne fait pas réapparaitre le texte quand il est passé hors champ.
Portabilité et modifications effectuées ....

Visitez mon portail et n'hésitez pas à me donner des idées pour le modifier.....votre avis m'intéresse !!

http://debbog.free.fr/

Source / Exemple :


/*************************************/
/*** Intégration du javascript     ***/
/*************************************/

  var y        = 0;
  var minuteur = null;
  var temps    = 10;

  //minuteur défilement en avant du texte
  function transfert()
  {
     minuteur=setInterval('defil()',temps);
  }
  //minuteur défilement en arriere du texte
  function transfertBis()
  {
     minuteur=setInterval('retourArriere()',temps);
  }
  function defil()
  {
    document.getElementById('texteDefil').style.top = y--;
    document.getElementById('compteur').value = y;
    
  }
  //Retour en arriere du texte
  function retourArriere()
  {
    document.getElementById('texteDefil').style.top = y++;
    document.getElementById('compteur').value = y;
  }
  //Arret défilement du texte
  function arretDefil()
  {
    clearInterval(minuteur);
    minuteur=null;
    y = 0;
    document.getElementById('texteDefil').style.top = y;
    document.getElementById('compteur').value = y;
  }
  function pause()
  {
    clearInterval(minuteur);
  }
  
/*************************************/
/*** Intégration dans une page PHP ***/
/*************************************/
<?  
    
    echo'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
            <title>Texte Defilant</title>        
            <meta name="robots"                    content="all">    
            <meta name="description"               content="Texte Défilant">
            <meta name="keywords"                  content="voir,défiler,slide">                
            <meta http-equiv="Content-Type"        content="text/html;charset=windows-1252;">
            <meta http-equiv="Content-Language"    content="fr">  
            <script language="javascript" type="text/javascript" src="textDef.js"></script>
            <link rel="stylesheet" href="style.css"> 
        </head>
        <body style="overflow:hidden;background-color:white;" onload="window.status=\'Votre navigateur est: \'+navigator.appName">
        <div style="width:600;float:top;padding:15px;">
            <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img
                src="http://www.w3.org/Icons/valid-html401"
                alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0" style="text-decoration:none;" >
            </a>
        </div>
        <center>
        <div id="Haut" style="left:0;position:absolute;background:white;z-index:1;width:100%;">
        <table align="center"  bgcolor="white">
        <tr>
            <td style="height:20;">
              <form name="boutons" style="border:solid black 1px;" action="">
                    <input class="boutons" onclick="pause()"         type="button" value="II"     >
                    <input class="boutons" onClick="transfert()"     type="button" value="<<"     >
                    <input class="boutons" onClick="arretDefil()"    type="button" value="Début"  >
                    <input class="boutons" onClick="transfertBis()"  type="button" value=">>"     >
                    <b>Pos: </b>  <input type="text" value="0" id="compteur" name="compteur" >               
              </form>
            </td>
        </tr>
        </table>
        </div>
        <table align="center" style="border:solid navy 2px;background:#aaccff;width:50%;height:30%;" >
        <tr>
            <td align="center">
             <div id="texteDefil" style="z-index:0;position:relative;left:0;height:90%;width:500;">
             <img src="titre.gif" alt="">
             <pre id="texte" style="">';include("texte.txt");echo'</pre>   
             </div>
            </td>
        </tr>

        </table>
        <div id="Bas"  style="position:relative;background:white;left:0;top:0; height:50;width:100%; z-index:1"></div>
        </center>
          </body>
        </html>

    ';
?>
/******************************************/
/*** Intégration de la feuille de style ***/
/******************************************/

.boutons{
    border      :solid navy 2px;
    background  :#aaccff;
    color       :navy;
    width       :50;
    height      :25;
}
#texte{
    text-align  :left;
    padding     :10;
    margin-top  :50;
    color       :navy;
    font-weight :bold;
}
#compteur{
    border      :solid black 1px;
    width       :30;
    text-align  :center;
}

Conclusion :


Pour un soucis de clarté, j'ai mis bout à bout le javascript, la page PHP et la feuille de style...de plus j'ai tout mis à la racine pour assurer la mise en place des sources externes pour les novices (OUPS des fots d'ortograf :P)

Venez sur mon portail, il est en cours de construction mais pourrait intéresser les novices ainsi que les exégètes du code ;)

http://debbog.free.fr/

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
14
Date d'inscription
mercredi 24 septembre 2003
Statut
Membre
Dernière intervention
18 avril 2006

Sympa la séparation du code, du css, du JS et du contenu :)

Par contre, y-a pas mal de travail pour le rendre conforme à une DTD standard. Je viens de m'y coller un moment en HTML 4.01 strict et j'ai encore plusieurs erreurs.
Enfin surtout, après que j'ai retiré toutes les balises html 3.2 ("center" & Co), mais sans toucher le javascript, le texte s'affiche mais ne défile plus ; seul "Pos" s'incrémente !?

Ça va faire 3 ans que je cherche un moyen de faire défiler quelques news sur un site adhérant aux standards web. Sans dec :'o|

kozaki
Messages postés
28
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
10 septembre 2011

désolé de n'avoir pas pu revenir plus tôt sur ce code, j'ai eu beaucoup à faire....me prévenir si besoin d'infos ou de codes en relations avec ceux déjà publiés..

Bien amicalement votre dévoué XLOADX...
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
41
"même pas besoin de programmation en java,"=> ça veut dire quoi ?

sinon non, ça a l'air bien mais c'est pas portable, donc ça reste &a améliorer...

bonne chance pour coriger ça...
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1
Messages postés
220
Date d'inscription
dimanche 7 septembre 2003
Statut
Membre
Dernière intervention
7 avril 2007

Bonsoir,
leris : toujours casse-bonbons héhé ! Tu commences à ennuyer un peu tout le monde là... (je ne suis pas le seul à le penser d'après ce que j'ai vu par ailleurs)

xloadx : très bien, même pas besoin de programmation en java, continues comme ça !
Afficher les 10 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.