Un texte qui fait le tour de la fenêtre

Soyez le premier à donner votre avis sur cette source.

Snippet vu 5 722 fois - Téléchargée 24 fois

Contenu du snippet

Le titre est assez explicite je pense^^. Reste à ajouter qu'il n'est pas finalisé ici et que vous pouvez bien entendu reprendre et personnaliser le script à votre guise. N'hésitez pas à me proposer des améliorations si vous en voyez, mais cette page a déjà subi l'examen de bultez^^.

Source / Exemple :


<html>
  <head>
    <title>Création d'un site web en html et javascript</title>
    <style>
        #texte{
          position: absolute;
          top: 50px;
          left: 50px;
          font-size: 30px;
          font-family: arial;
          font-weight: bold;
          }
        #rouge{
          position: absolute;
          top: 20px;
          left: 200px;
          color: 'red';
          }
        #bleu{
          position: absolute;
          top: 20px;
          left: 450px;
          color: 'blue';
          }
        #vert{
          position: absolute;
          top: 20px;
          left: 700px;
          color: 'green';
          }
        #jaune{
          position: absolute;
          top: 20px;
          left: 950px;
          color: 'yellow';
          }
    </style>
    <script language="Javascript">
      par = 'Ce site sans theme particulier est un<br>exercice et un entraînement à la production<br>en javascript. Toutes vos idées pour son<br>développement sont les bienvenues.';
      abscisse = 50;
      ordonnee = 50;
      compteur = 0;
      car = 0;
      couleur = 'red';
      function changecouleur(choix){
      couleur = choix;
      }
      function moveText(){
        compteur ++;
        if(compteur == 4){
        compteur = 0;
        if(par.charAt(car) == '<') car = car + 4;
        if(par.charAt(car) == ' ') car++;
        document.getElementById('texte').innerHTML = par.substring(0,car) + par.charAt(car).fontcolor(couleur) + par.substr(car + 1);
        car ++;
        if(car > par.length) car = 0;
        }
        absmax = document.body.clientWidth - document.getElementById('texte').clientWidth - 50;
        ordmax = document.body.clientHeight - document.getElementById('texte').clientHeight - 50;
        if(ordonnee == 50 && abscisse < absmax){ 
          document.getElementById('texte').style.left = abscisse;
          abscisse ++;
          }
        if(abscisse == absmax && ordonnee < ordmax){
          document.getElementById('texte').style.top = ordonnee;
          ordonnee ++;
          }
        if(ordonnee == ordmax && abscisse > 50){
          document.getElementById('texte').style.left = abscisse;
          abscisse --;
          }
        if(abscisse == 50 && ordonnee > 50){
          document.getElementById('texte').style.top = ordonnee;
          ordonnee --;
          }
        setTimeout("moveText()",20)
        }
    </script>
  </head>
  <body onload="moveText()" background="cloud.gif">
    <a href="#" onclick="changecouleur('red')" id="rouge">rouge</a><a href="#" onclick="changecouleur('blue')" id="bleu">bleu</a><a href="#" onclick="changecouleur('green')" id="vert">vert</a><a href="#" onclick="changecouleur('yellow')" id="jaune">jaune</a>
    <div id="texte">
      Je suis un texte fenêtre-trotteur<br>
      résultant de près d'une semaine<br> 
      de travail.
    </div>
  </body>
</html>

A voir également

Ajouter un commentaire Commentaires
Messages postés
128
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
20 juillet 2009

merci :)
Messages postés
170
Date d'inscription
jeudi 21 octobre 2004
Statut
Membre
Dernière intervention
9 janvier 2008

Très sympa ton code !

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.

Du même auteur (Nitruk)