Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Effets non-contextuels

  Affichage de textes séquentiels mobiles

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est d'afficher un texte un certain temps, puis de le remplacer par un autre, puis un autre... et de recommencer au début ou pas, ou de lancer une autre action en fin de tous les affichages et cela, à différents endroits dans la fenêtre, aléatoirement.
  Principe
Une liste de textes est tout d'abord créée dans un tableau JavaScript ('Array()').
Une fonction génère ensuite l'affichage du premier élément de ce tableau au sein de calques qui seront écrits dynamiquement dans le corps de la page. Elle demande parallèlement à une autre fonction de positionner le calque suivant deux valeurs aléatoires rentrant dans la fenêtre.
Dans le corps de la page, on écrit dynamiquement le calque qui recevra les textes à afficher.
Le côté pratique de ce script est qu'il sépare totalement le mécanisme de la séquence des textes à afficher, d'où une maintenance aisée. De plus, le nombre de textes ne modifie rien au script, vous pouvez donc en mettre autant que vous le souhaitez sans aucun risque.

Attention cependant : si vous placez du JavaScript dans des liens dans les textes, veillez à ne pas laisser d'espace, sous peine de bloquage sur Netscape et d'erreur sur Internet Explorer. Remplacez-les par des ' '.
De plus, ce script ne fonctionne pas sur Internet Explorer 4.0 PC et sur Mac, les textes changent mais ne se déplacent pas.
  Le script
dans la partie <head>
<script language="JavaScript">
// détection du navigateur
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Point de départ des messages
var X = 0;

// Tous les textes à afficher
var textes = new Array();
textes[0] = "Bonjour !!";
textes[1] = "Comment allez-vous ?";
textes[2] = "Moi ça va bien...";
textes[3] = "Vous êtes libre samedi ?";
textes[4] = "Une <a href=javascript:alert(\'Un film je veux dire ;-)\');>toile</a> ?";
textes[5] = "Un resto ?";
textes[6] = "Non ?";
textes[7] = "Bon tant pis...";
textes[8] = "Je resterai seul alors.";

// La mise en forme éventuelle, avant et après les textes
var avant = "<b>";
var apres = "</b>";

// Largeur maximale et position de l'affichage
var largeur = 250;
var gauche = 0;
var haut = 0;

// Fonction de positionnement aléatoire du calque contenant les textes
function fuite() {

// Génération de nombres aléatoires pour positionner le calque
gauche = Math.round((Math.random())*1000);
haut = Math.round((Math.random())*1000);

// Instructions pour Netscape
if (nc4) {

// Si les nombres aléatoires rentrent dans l'espace disponible de la fenêtre
if ( gauche < (innerWidth - largeur) && haut < (innerHeight - 24) ) {

// On positionne le calque
document.lieu.left = gauche;
document.lieu.top = haut;
}

// Sinon on relance la fonction
else {
setTimeout("fuite()",20);
}
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {

// On utilise des variables créées dans la partie body
if ( gauche < (inWidth - largeur) && haut < (inHeight - 24) ) {
lieu.style.left = gauche;
lieu.style.top = haut;
}
else {
setTimeout("fuite()",20);
}
}
}

// Fonction d'écriture du calque contenant la chaîne à afficher
function affiche() {

// Déplacement du calque
fuite();

// Réinitialisation des variables de position
gauche = 0;
haut = 0;

// Instructions pour Netscape
if (nc4) {
eval("interne = (document.lieu)");
with (interne) {
document.open();
document.write(avant + textes[X] + apres);
document.close();
}
}

// Instructions pour Internet Explorer
if (ie4) {
eval('document.all.lieu.innerHTML = "' + avant + textes[X] + apres + '"');
}

// Si il reste des textes à afficher, on relance la fonction toutes les 1500 millisecondes (1,5 seconde)
if ( X < textes.length-1 ) {

// Et on indique le numéro du texte suivant
X++;
setTimeout("affiche()",1500);
}

// Sinon on remet le compteur de textes à zéro pour redémarrer (facultatif)
else {
X = 0;
setTimeout("affiche()",2000);
}
}
</script>

dans la partie <body>
<!-- Calque avec image à 100% de large pour que IE connaisse la largeur de l'écran -->
<div id="cal" style="position: absolute; left: 0px; top: 0px; visibility: hidden;">
<img src="px.gif" name="cale" width="100%" height="1">
</div>

Tout le contenu de la page...

<!-- Placer ce qui suit à la fin de la page -->
<script language="JavaScript">
// Pour Internet Explorer, on créé deux variables : largeur disponible et hauteur 'approximative' disponible
if (ie4) {
var inWidth = cale.width;
var inHeight = Math.round(inWidth*.55);
}

// Création du calque qui recevra les textes
document.write('<div id="lieu" style="position: absolute;">');
</script>

<script language="JavaScript">
// Affichage des textes
affiche();
</script>

<script language="JavaScript">
// Fermeture du calque recevant les textes
document.write('</div>');
</script>
  Démonstration
Regardez en haut de cette page, sur le 'premier écran'...
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    enc_sequences_alea.zip
    1 Ko    		 telechargez le script telechargez le script
    Script séparé :
    enc_sequences_alea2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter