formulario dinámico (VIII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Completando el dinamismo.-

Una vez creado el código para mostrar una capa debemos tener en cuenta que tenemos que llamarlo cada vez que deseemos mostrar uno de los 3 formularios que tenemos ocultos en nuestra página. Pero si llamamos a la función para mostrar uno de ellos, y luego la volvemos a llamar para mostrar otro diferente, el resultado es que tendremos los dos en pantalla, con lo que no se verá nada claro.

Debemos ampliar la función para que cuando se muestre una capa las demás se oculten, con lo que sólo habrá visible en pantalla en cada momento un único formulario. La ampliación necesaria es la siguiente:

<script language="JavaScript" type="text/javascript">
  var nc = (document.layers) ? true:false
  var ie =  (document.all) ? true:false
  var n6 = (document.getElementById) ? true:false
 
  function muestracapa(id)
 {
    if(ie)
   {
     document.all['musica'].style.visibility="hidden";
     document.all['cine'].style.visibility="hidden";
     document.all['informatica'].style.visibility="hidden";
     document.all[id].style.visibility="visible";
   }
    else if(nc)
   {
     document.principal.document.fondo.document.layers['musica'].visibility="hidde";
     document.principal.document.fondo.document.layers['cine'].visibility="hidde";
     document.principal.document.fondo.document.layers['informatica'].visibility="hidde";
     document.principal.document.fondo.document.layers[id].visibility="show";
   }
    else if(n6)
   {
     document.getElementById('musica').style.visibility="hidden";
     document.getElementById('cine').style.visibility="hidden";
     document.getElementById('informatica').style.visibility="hidden";
     document.getElementById(id).style.visibility="visible";
   }
 }
</script>

Nota como el valor asignado par mostrar y ocultar una capa varía de un navegador a otro. Para Nestcape Navigator 6x e Internet Explorer los valores de visibility son visible e hidden, mientras que los correspondientes a Nestcape 4x son show e hide. Ademáás, Nestcape 6x y Explorer usan la propiedad style.

Ya sólo nos queda llamar a la función en cada radio botón, para lo que usamos siempre el evento onClick, pasándole como argumento en cada caso el id de la capa adecuada, siempre entre comillas simples:

<form name="menu">
<table cellpadding="2" cellspacing="0" border="0">
  <tr>
   <td width="15">&nbsp;</td>
   <td class="titulo">Elige una de estas opciones:</td>
   <td><input type="radio" class="radio" name="opcion" value="musica" onClick="muestracapa('musica')"></td>
   <td>m&uacute;sica</td>
   <td><input type="radio" class="radio" name="opcion" value="cine" onClick="muestracapa('cine')"></td>
   <td>cine</td>
   <td><input type="radio" class="radio" name="opcion" value="informatica" onClick="muestracapa('informatica')"></td>
   <td>inform&aacute;tica</td>
 </tr>
</table>
</form>

El resultado obtenido es este.

Si queréis ver el código fuente, botón derecho sobre la ventana flotante y seleccionar "ver código fuente".