Comment insérer ou supprimer des blocs de page en survolant un lien ou en cliquant dessus ?

On ne confondra pas cet effet avec les manipulations de visibilité que nous avons évoqué ailleurs et qui ne provoquent aucun déplacement dans les différents éléments de la page. Ici, il s'agit d'ajouter ou de supprimer des fragments de page en provoquant un réagencement général de cette page. Passer la souris ici pour voir une petite démonstration de cet effet, à moins que vous ne soyez sous NN4 :-(

Cet effet s'obtient

  1. en créant ces fragments dans le flot naturel de la page, à l'intérieur de n'importe quel élément HTML adapté à ce que l'on veut faire (ce peut être un paragraphe <p>...</p> ou un bloc <span> ou encore un bloc <div>, etc...)
  2. en attribuant un identificateur id="..." à cet élément, afin de pouvoir en modifier le rendu par javascript
  3. et en lui affectant une propriété de style display:none pour le retirer de la page ou display:inline pour le faire revenir dans l'état où on l'a créé, par l'intermédiaire du script ci-dessous : 
function affiche(id,oui_non) {
  var element_style=null
  if (document.getElementById) {
    element_style=document.getElementById(id).style;
  } else if (document.all) {
    element_style=document.all[id].style;
  } 
  if (element_style) {
     if (oui_non==true) element_style.display="inline";
     if (oui_non==false) element_style.display="none";
  } 
}

Dans ce script, id est l'identificateur et oui_non une variable logique qu'on mettra soit à true, oui à false, selon qu'on voudra afficher ou retirer le bloc. Le script commence par mettre la propriété style du bloc dans la variable element_style, en considérant séparément les navigateurs compatibles avec les normes du W3C, puis les navigateurs Explorer. On n'a pas prévu de test pour NN4x parce que la propriété display n'est pas modifiable avec ces navigateurs.

Application à des menus

Cliquez ici pour voir une application directe de ce principe à un menu «glissant».

Charles