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

JavaScript 1.3
Navigation

  Navigation entre layers

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script

  Fonction
Le but de ce script est de proposer une navigation rapide. Des calques contiennent chacun du texte, des images, ce que vous voulez, et des boutons 'suivant' et 'précédent' qui permettent de passer d'un calque à l'autre.
L'avantage est de continuer à charger les layers suivants pendant que le visiteur peut déjà voir le premier.
  Principe
Deux fonctions permettent la navigation soit en avant, soit en arrière.
Chaque layer est identifié par un numéro sur la forme 'calque0', 'calque1'... et contient ce qui doit apparaître sur la page plus deux boutons faisant appel aux fonctions évoquées juste avant.
  Le script
dans la partie <head>
<script language="JavaScript">
// détection du navigateur pour ensuite s'adresser correctement à la gestion des layers, ns4 sera vrai si on est sur Netscape, ie4 sera vrai si on est sur Explorer
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function suivant(numero) {

// si on est sur netscape...
if (ns4) {

// on prépare l'intervention sur le layer actuel (future disparition)
luimeme = eval('document.layers.calque' + numero);

// on prépare l'intervention sur le layer 'suivant'
suiv = eval('document.layers.calque' + (numero + 1));
}

// si on est sur explorer...
if (ie4) {
luimeme = eval('document.all.calque' + numero + '.style');
suiv = eval('document.all.calque' + (numero + 1) + '.style');
}

// on cache le layer actuel
luimeme.visibility = 'hidden';

// on fait apparaître le layer suivant
suiv.visibility = 'visible';
}


// et inversement pour revenir en arrière...
function precedent(numero) {
if (ns4) {
preced = eval('document.layers.calque' + (numero - 1));
luimeme = eval('document.layers.calque' + numero);
}
if (ie4) {
preced = eval('document.all.calque' + (numero - 1) + '.style');
luimeme = eval('document.all.calque' + numero + '.style');
}
preced.visibility = 'visible';
luimeme.visibility = 'hidden';
}
</script>

dans la partie <body>
<!-- Chaque layer (div) doit avoir un nom de la forme 'calque + numero' -->
<!-- Seul le premier layer est visible au depart, les autres sont caches -->
<div id="calque0" style="position: absolute; border: 1px; left: 50px; top: 50px; width: 200px; height: 200px; z-index: 0; visibility: visible; background: #FFCCCC">
<img src="images/0.gif"> <a href="javascript:suivant(0);">Suivant</a>
</div>

<div id="calque1" style="position: absolute; border: 1px; left: 50px; top: 50px; width: 200px; height: 200px; z-index: 0; visibility: hidden; background: #CCFFCC">
<a href="javascript:precedent(1);">Précédent</a> <img src="images/1.gif"> <a href="javascript:suivant(1);">Suivant</a>
</div>

<div id="calque2" style="position: absolute; border: 1px; left: 50px; top: 50px; width: 200px; height: 200px; z-index: 0; visibility: hidden; background: #CCCCFF">
<a href="javascript:precedent(2);">Précédent</a> <img src="images/2.gif">
</div>
  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é :
    nav_layers.zip
    4 Ko    		 telechargez le script telechargez le script
    Script séparé :
    nav_layers2.zip
    5 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    DHTML
    HTML 4
    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