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

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.
  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.
Dans le corps de la page, on écrit dynamiquement les calques qui recevront les textes à afficher (ils sont différents pour Netscape et Internet Explorer).
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 texte 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 ' '.
  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 de l'affichage
var largeur = 250;

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

// Instructions pour Netscape
if (nc4) {
eval("interne = (document.lieu.document.lieulieu)");
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>
<script language="JavaScript">
// Création des calques qui recevront les textes
if (nc4) {
document.write('<ilayer id="lieu" width="' + largeur + '">');
document.write('<div id="lieulieu" style="position: absolute;">');
}
if (ie4) {
document.write('<div id="lieu">');
}
</script>

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

<script language="JavaScript">
// Fermeture des calques recevant les textes
if (nc4) {
document.write('</div></ilayer><br>');
}
if (ie4) {
document.write('</div>');
}
</script>
  Démonstration
  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.zip
    1 Ko    		 telechargez le script telechargez le script
    Script séparé :
    enc_sequences2.zip
    1 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