Trucsweb.com

Trucsweb.com

DHTML

Introduction au HTML dynamique

RDFFav

Modifier la visibilité des objets en DHTML - Compatible Netscape 6 (DOM-1)

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 ».visibilité visible show visibility effacer afficher layer dom invisible hidden hide css style div style.visibility document mozilla netscape internet explorer getElementsByTagName onMouseOver onMouseOut roll over réactif réactiveModifier la visibilité des objets en DHTML  - Compatible Netscape 6 (DOM-1)

  • · 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.

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 8216 - Pages vues : 39851
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@