Un texte qui fait le tour de la fenêtre

Commenter

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

S'inscrire maintenant

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)