Masquer ou montrer un calque

Voici deux fonctions bien utiles pour la lisibilité d'un site internet, que j'utilise souvent : montrer() et cacher().

Vous pouvez mettre les codes en début de page html ou dans un fichier différent où vous stockerez tous vos codes javascript. Pour ma part je les isole dans un fichier .js afin de les trouver plus facilement.

Je saisis mes fonctions simplement dans mon fichier de fonctions javascript que je nomme reuse.js :

function montrer(calque){
    document.getElementById(calque).style.visibility = 'visible';
}

function cacher(calque) {
    document.getElementById(calque).style.visibility = "hidden";
}

Ces fonctions sont relativement simples. Il ne faut pas oublier de leur passer en paramètre le nom du calque sur lequel elles doivent agir.

Dans le fichier html, je fais donc un appel à mon fichier de fonctions dans l'en-tête :

<SCRIPT TYPE="text/javascript" src="reuse.js"></SCRIPT>

Je crée un calque qui est invisible par défaut. La notion d'invisbilité est définie dans la feuille style et appelée ici par class="bordure". Ne pas oublier l'id du calque car c'est lui qui sera passé en paramètre pour rendre le calque visible.

<div class="bordure" id="laycomment">blablabla</div>

Voici la feuille de style qui permet de mettre l'affichage du calque en invisible par défaut :

.bordure { border: 1px solid #FFFFFF; padding: 5px; visibility:hidden}

Si on regarde de plus près cette CSS, on voit que le calque aura une bordure blanche d'un 1 px d'épaisseur avec un espacement de 5 px à l'intérieur et qu'il sera caché.

Et maintenant, voyons voir le lien qui va nous permettre de faire apparaître le calque :

<a href="#" onclick="montrer('laycomment');">Commentaires</a>

Il suffit de cliquer dessus pour que le calque soit visible. En cas de difficultés avec la balise <A>, consultez l'article "Balise <A>" dans la section "HTML".