- · Niveau : DÉBUTANT
- · Compatibilité : IE 4+, NS 4+ et Netscape 6
Définir la visibilité des objets est ce qu’il y a de plus simple en DHTML. Il n’y a que deux états, soit : visible « visible » et invisible « hidden ». Une fois vos objets déclarés et le test de compatibilité du DOM effectué, il ne reste qu’à modifier la propriété CSS « style.visibility » de votre objet ou « layer ».
Mise-à-jour 2014
Je reçois des visiteurs du forum d’Alsacreations.fr concernant un formulaire dynamique. Il existe depuis plusieurs méthodes, on ne dit plus DHTML non plus ;- ). Dont le CSS. Voilà la solution simple, un exemple avec un prix différent selon un abonnement individuel ou corporatif. J’utilise une bonne vieille classe CSS tout simplement. Le JavaScript ne fait que changer la classe de « ouvert » à « fermer »
Si ça peut aider quelqu’un. Le seul problème avec cette solution, impossible d’ajouter une animation simple avec transition ou transform. Il faut absolument une animation avec @keyframes.
<style> .ouvert {display: block;} .ferme {display: none;} </style> <form method="post" id="oContact" name="contact" action="/"> <h5> <label for="hAdhesionMembre"><input name="hAdhesion" id="hAdhesionMembre" value="Membre individuel" onchange="twAjusteOnglet('oMembre','oOrganisme');" tabindex="1" type="radio" checked="checked"> Membre individuel</label> <label for="hAdhesionOrgranisme"><input name="hAdhesion" id="hAdhesionOrgranisme" value="Organisme ou entreprise" onchange="twAjusteOnglet('oOrganisme','oMembre');" tabindex="2" type="radio" /> Organisme ou entreprise</label> </h5> <!-- Onglet un --> <div id="oMembre"> <label>Coût de l’adhésion (Membre individuel) * :</label> <label for="hCout5"><input name="hCout" id="hCout5" value="5,00" tabindex="3" type="radio"> 5,00 $</label> <label for="hCout10"><input name="hCout" id="hCout10" value="10,00" tabindex="4" type="radio"> 10,00 $</label> </div> <!-- Onglet deux --> <div class="ferme" id="oOrganisme"> <label>Coût de l’adhésion (Organisme ou entreprise) * :</label> <label for="hOrgCout10"><input name="hOrgCout" id="hOrgCout10" value="10,00" tabindex="3" type="radio" /> 10,00 $</label> <label for="hOrgCout25"><input name="hOrgCout" id="hOrgCout25" value="25,00" tabindex="4" type="radio" /> 25,00 $</label> </div> </form> <script> function twAjusteOnglet(id,id2) { document.getElementById(id).className = 'ouvert'; document.getElementById(id2).className = 'ferme'; } </script>
Exemple
Bien le bonjour aux visiteurs du forum d’Alsacreations.fr.
Premièrement vous devez déclarer votre objet
<div id="monobjet" style="visibility:hidden">contenu</div>
L’objet ne sera pas affiché car il est " hidden ". Pour modifier dynamiquement la propriété, vous devez créer une procédure Javascript. Évidemment, il faut commencer par déterminer le DOM et ensuite exécuter le code approprié.
Exemple d’une procédure qui rend visible un objet
function Affiche() {
if(ie4) { // Internet explorer
monobjet.style.visibility = %27visible%27;
}
else if(ns4) { // Netscape 4.x
document.monobjet.visibility = %27show%27;
}
else if(ns6) { // Netscape 6 (mozilla)
var divns6 = document.getElementsByTagName("div")
divns6[%27monobjet%27].style.visibility = %27visible%27;
}
}
Exemple d’une procédure qui rend invisible un objet
function Cache() {
if(ie4) { // Internet explorer
monobjet.style.visibility = %27hidden%27;
}
else if(ns4) { // Netscape 4.x
document.monobjet.visibility = %27hidden%27;
}
else if(ns6) { // Netscape 6 (mozilla)
var divns6 = document.getElementsByTagName("div")
divns6[%27monobjet%27].style.visibility = %27hidden%27;
}
}
Pour utiliser ces deux fonctions, vous n’avez qu’à faire un appel. Par exemple dans un lien URL
<a href="#" onMouseOver="Affiche()"
onMouseOut="Cache()">Lien</a>
Exemple complet d’une procédure qui fait la modification selon la propriété d’origine
<html>
<head>
<title>Test de propriété "Visible/invisible"</title>
<script language="JavaScript">
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
function Affiche_Cache(nObjet) {
if(ie4) { // Internet explorer
eval(nObjet).style.visibility =
(eval(nObjet).style.visibility==%27visible%27?%27hidden%27:%27visible%27);
}
else if(ns4) { // Netscape 4.x
document.eval(nObjet).visibility =
(document.eval(nObjet).visibility==%27show%27?%27hidden%27:%27show%27);
}
else if(ns6) { // Netscape 6 (mozilla)
var divns6 = document.getElementsByTagName("div")
divns6[nObjet].style.visibility =
(divns6[nObjet].style.visibility==%27visible%27?%27hidden%27:%27visible%27);
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="monobjet" style="visibility:hidden">contenu</div>
<a href="#" onMouseOver="Affiche_Cache(%27monobjet%27)"
onMouseOut="Affiche_Cache(%27monobjet%27)">Lien</a>
</body>
</html>
Cette fonction exécute en premier lieu un test pour déterminer quel code exécuté. Ensuite, puisque la propriété "visibility" est une valeur " booléenne ", vous pouvez la modifier avec un simple test de condition qui inverse la propriété selon la propriété d’origine. Donc, si l’objet est visible, la propriété sera changé pour invisible. La fonction est portable car le nom de l’objet est passé en paramètre.
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/dhtml/l_dhtml.gif)
AbuseIPDB
Connexion