CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 11:28:40

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> UN TEXTE QUI FAIT LE TOUR DE LA FENÊTRE

UN TEXTE QUI FAIT LE TOUR DE LA FENÊTRE

Information sur la source

Note :

5,50 / 10

Catégorie :Divers Classé sous :texte, défilant, tour, fenêtre Niveau :Débutant Date de création :05/07/2006 Date de mise à jour :06/07/2006 09:58:07 Vu :4 913

Auteur : Nitruk

Ecrire un message privé

Commentaire sur cette source (2)

Ajouter un commentaire et/ou une note

Description

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

<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>

<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>

Historique

06 juillet 2006 09:48:56 :: Maintenant, les lettres de mon texte prennent une à une une couleur paramétrable ! sisi !^^(au choix rougle, bleu, vert, jaune mais libre à vous d'en ajouter ou d'en elever.
06 juillet 2006 09:56:15 :: oublié de remplacer le code lors de la précédente mise à jour. désolé !
06 juillet 2006 09:58:07 :: oublié de remplacer le code lors de la précédente mise à jour. désolé !

Sources de la même categorie

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges

TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol

CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

EFFET DE TEXTE EN CSS3 par kazma

Commentaires et avis

Commentaire de johann1 le 10/07/2006 23:07:34

Très sympa ton code !

Commentaire de Nitruk le 24/07/2006 15:05:25

merci :)

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

javascript apostrophe [ par tews ] Salut à tous. J'ai un sale bug sur un marquee (texte défilant). Quand le texte défilant contient une apostrophe, j'obtiens un message d'erreur.Existe- texte défilant [ par aurelivs ] bonjour je voudrais créer un texte défilant verticalement qui puisse marcher sous mozilla fiirefox. je dis ca parce que, avec la balise <marquee Texte défilant avec arrêt souris [ par Jonef ] Salut à tousJ'ai un petit prob car j'aimerais créer un page internet où il y aurait un script java qui ferait défiler un texte horizontalement et qui texte défilant cliquable [ par bbpl ] Bjr,Je recherche un texte défilant avec plusieurs liens cliquables.Merci tour de magie [ par xantro ] voila mon but et de faire disparatitre et répparaitre un champs texte si une case a cocher est ...... bah coché ... ou non. Si c'est impossi texte défilant [ par cristina49 ] bonsoir,je souhaite faire apparaitre sur mon site un texte défilant. Or sur tous les sites ou j'ai été, le texte se trouve dans un cadre (une zone de Texte défilant verticalement (un peu comme celui de l'active deskpt de JAVASCRIPTFr.com [ par pi0up51 ] J'aurais bien aimé que quelqu'un me dise comment je pourrais faire, ça, parcque là je sèche total !!Merci d'avance pour votre aide !!pi0up51 News, texte défilant [ par metis15 ] Hello,quelqu'un sait faire le texte défilant comme sur ce site http://www.boursedirect.fr/ ???Pas simple à première vue...<|[;o Transmission de données de la fenêtre mère vers une popup [ par jougy ] Bonjour à tous, Alors voilà mon problème : j'ai un formulaire dans mon site web contenant 2 champs texte, et lorsque je l'envoie, j'ouvre une popup q

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP