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

DHTML
Effets non-contextuels

  Générique d'introduction

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 de créer sur une page une sorte de générique façon introduction de film (apparition de textes les uns après les autres, d'images, avec ou sans liens).
  Principe
Il s'agit de créer à la volée un calque (layer), qui se ré-écrit sur lui-même suivant un rythme déterminé par des variables.
Puis les données à afficher sont piochées une par une dans un tableau JavaScript.
Le tableau peut contenir du texte, des balises HTML, des liens, et même des éléments dynamiques (la date par exemple).

On prendra garde aux différences d'interprétation entre Netscape et Internet Explorer en doublant le code de façon adaptée à chacun des deux navigateurs.
  Le script
dans la partie <head>
<script language="JavaScript">
// détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Script pour afficher la date (non nécessaire)
var x = new Date();
var jour = x.getDate();
if (jour <= 9) jour = "0" + jour;
var mois = x.getMonth() + 1;
if (mois <= 9) mois = "0" + mois;
var annee = x.getFullYear();

var horaire = "nous sommes le " + jour + "/" + mois + "/" + annee + ".";
// Fin du script pour la date


// Vitesse = attente entre deux affichages, en millisecondes
var vitesse = 1000;

// Enchainement = attente entre le dernier texte et le retour au premier (+ la valeur de vitesse), en millisecondes
var enchainement = 1000;

// Si on souhaite lancer une nouvelle page à l'issue du générique
var suivant = "fichier.html";

// Les textes que vous souhaitez afficher un par un (notez le dernier élément : une variable JavaScript, donc sans quote)
var contenu = new Array(
'Un générique',
'réalisé par ',
'<img src=images/logo.gif>',
'pour info...',
horaire);

// Les éventuelles mise en forme, ici un tableau pleine page pour centrer les textes
// (attention, ne pas mettre de guillemets (simples ou doubles)
var deb_mise_en_forme = "<table border=10 width=100% height=100%><tr><td align=center>";
var fin_mise_en_forme = "</td></tr></table>";


// On compte les éléments à afficher et on initialise le script
var elements = contenu.length;
var passage = 0;

function reaffiche() {

// Autant de fois qu'il y a d'éléments à afficher
if ( passage < elements ) {

// Instructions pour Netscape
if (ns4) {
eval("interne = (document.lieu.document.lieulieu)");
with (interne) {
document.open();

// Voici ce qu'on affichera
document.write(deb_mise_en_forme + contenu[passage] + fin_mise_en_forme);
document.close();
}
}

// Instructions pour Internet Explorer
if (ie4) {

// Ce qu'on affichera
eval('document.all.lieu.innerHTML = "' + deb_mise_en_forme + contenu[passage] + fin_mise_en_forme + '"');
}

// On préepare l'élément suivant
passage++;

// On relance la fonction
setTimeout("reaffiche()",vitesse);
}

// Une fois que chaque élément est passé une fois
else {

// Ici on relance le générique depuis le début
passage = 0;
setTimeout("reaffiche()",enchainement);

// Pour passer à une autre page on remplace les deux lignes précédentes par :
//location.href = suivant;
}
}
</script>

dans la partie <body>
<script language="JavaScript">


if (ns4) {
document.write('<ilayer id="lieu" width="500">');
document.write('<div id="lieulieu" style="position: absolute">');
}


if (ie4) {
document.write('<div id="lieu" align="center" height="150">');
}
</script>

<script language="JavaScript">


reaffiche();
if (ns4) {
document.write('</div></ilayer>');
}
if (ie4) {
document.write('</div>');
}
</script>
  Démonstration

Voir la 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_intro.zip
    5 Ko    		 telechargez le script telechargez le script
    Script séparé :
    enc_intro2.zip
    5 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