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

JavaScript 1.3
Divers

  Faire apparaître / disparaître des éléments

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 faire apparître ou disparaître des éléments sur la page.
  Principe
Les éléments à faire disparître ou apparaître sont placés dans des layers (<div>) qui sont au départ, tous visibles.
On cré d'abord une variable qui accueillera l'état des calques (allumé ou pas).
La fonction agit ensuite différamment suivant le navigateur et en fonction de cette variable. Si elle est 'allumée' :
  • la propriété 'visibility' est placée à 'hidden',
  • la variable 'allume' est placé à 'non'.
Et inversement si la variable 'allume' est à 'non'.
L'avantage de ce script est qu'il gère autant d'élément que vous le souhaitez. Il suffit de passer à la fonction comme paramètre le nom (ou l'ID) du layer.
  Le script
dans la partie <head>
<script language="JavaScript">
// détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// la variable donnant l'information allumé (1), pas allumé (0)
var allume = 1;

function change(element) {

// ceci pour relier l'élément visé à son état (allumé, pas allumé)
var emplacement = 'allume_' + element;
allume == emplacement;

// si l'élément est allumé
if ( allume == 1 ) {

// actions pour Netscape
if (ns4) {

// on éteint l'élément
eval('document.' + element).visibility = 'hidden';

// on stocke l'information 'pas allumé'
allume = 0;
}

// de même pour Internet Explorer, libellé autrement
if (ie4) {
eval(element).style.visibility = 'hidden';
allume = 0;
}
}

// si l'élément est éteint
else {

// actions pour Netscape
if (ns4) {
eval('document.' + element).visibility = 'visible';
allume = 1;
}

// de même pour Internet Explorer, libellé autrement
if (ie4) {
eval(element).style.visibility = 'visible';
allume = 1;
}
}
}
</script>

dans la partie <body>
<a href="javascript:change('calque1');">Changer premier calque</a>
<a href="javascript:change('calque2');">Changer second calque</a>

Premier calque : <div name="calque1" id="calque1" style="position: relative; visibility: visible;"> Coucou 1... </div>

Second calque : <div name="calque2" id="calque2" style="position: relative; visibility: visible;"> Coucou 2... </div>
  Démonstration
Changer premier calque
Changer second calque

Premier calque :
Coucou 1...


Second calque :
Coucou 2...
  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é :
    div_app_disp.zip
    1 Ko    		 telechargez le script telechargez le script
    Script séparé :
    div_app_disp2.zip
    1 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