La visibilité
- 'visibility'
-
Valeur : visible | hidden | collapse | inherit Initiale : inheritvisibleS'applique à : tous les éléments Héritée : nonouiPourcentage : sans objet Médias : visuel
La propriété 'visibility' spécifie le rendu, ou non, des boîtes générées par un élément donné. Ces boîtes, bien qu'invisibles, influencent toujours la mise en forme du document (utiliser la propriété 'display' avec la valeur 'none' pour prohiber la génération d'une boîte, et ainsi toutes influences sur la mise en forme). Les valeurs ont les significations suivantes :
- visible
- La boîte générée est visible ;
- hidden
- La boîte générée est invisible (entièrement transparente), mais celle-ci influençant toujours la mise en forme ;
- collapse
- Consulter le passage traitant des effets dynamiques sur les rangées et colonnes des tables. Quand on l'utilise avec autre chose, cette valeur 'collapse' correspond à 'hidden'.
On peut employer cette propriété conjointement avec des scripts pour créer des effets dynamiques.
Dans l'exemple suivant, quand on presse l'un ou l'autre bouton du formulaire, un script actionné par un utilisateur provoque l'apparition de la boîte qui lui correspond et, en même temps, la disparition de l'autre. Ces boîtes conservant leur taille et leur emplacement, l'effet produit le remplacement de l'une par l'autre (le script, écrit dans un langage hypothétique, pouvant, ou non, produire un effet avec un agent utilisateur conforme).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!-- #conteneur1 { position: absolute; top: 2in; left: 2in; width: 2in } #conteneur2 { position: absolute; top: 2in; left: 2in; width: 2in; visibility: hidden; } --> </STYLE> </HEAD> <BODY> <P>Choose a suspect:</P> <DIV id="conteneur1"> <IMG alt="Al Capone" width="100" height="100" src="suspect1.jpg"> <P>Nom : Al Capone</P> <P>Résidence : Chicago</P> </DIV> <DIV id="conteneur2"> <IMG alt="Lucky Luciano" width="100" height="100" src="suspect2.jpg"> <P>Nom : Lucky Luciano</P> <P>Résidence : New York</P> </DIV> <FORM method="post" action="http://www.suspect.org/process-bums"> <P> <INPUT name="Capone" type="button" value="Capone" onclick='show("conteneur1");hide("conteneur2")'> <INPUT name="Luciano" type="button" value="Luciano" onclick='show("conteneur2");hide("conteneur1")'> </FORM> </BODY> </HTML>