Ocultar / Mostrar capas con JScript

Requisitos previos :

•  Conocimientos básicos de html (capas) y JScript

Imagínate esta situación: Estas trabajando en ambiente Web, en uno de los muchos formularios necesitas ocultar/desplegar cierta información que le puede interesar al usuario, por ejemplo, al hacer clic sobre un hipervínculo, inmediatamente debajo de el, necesitas que aparezca dicha información. De manera default esta información no se mostraría al usuario.  ¿Cómo hacer esto? JScript nos permitirá hacer esto de manera muy práctica y sencilla.

Primero veamos el código de nuestro formulario:

<Form id=”formulario” name=”formulario” method=”post” action=”pagina2.html”>
  <table align=”center”>
  <tr>             
          <tr align=”center”> <td><a href=”javascript:Mostrar(‘Capa1′);” mce_href=”javascript:Mostrar(‘Capa1′);”>Términos y Condiciones</a></td>
          </tr>
          <tr align=”center”>
           <td>
                <div id=”Capa1″ style=”display=none”>
                  Este es el texto que aparecerá o se ocultará fsdfkjsdkf
                 fsdfsfdsdfsfsafasfasfsafsafsaf
               </div>
           </td>
          </tr>
         <tr>  
  <td align=”center”>
      <Input type=”submit” id=”btnAceptar” name=”btnAceptar” value=”Ingresar”>
  </td>
  </tr> 
 </table>
</form> 

Como podemos ver, se tiene una capa o layer con id = ”Capa1″ dentro de ella tenemos el código que vamos a desplegar/ocultar, además un hipervínculo que invocará a la función Mostrar. El código funcionará de la siguiente manera: al hacer clic sobre el hipervínculo llamará a la función Mostrar que recibe como parámetro el nombre de nuestra capa (id), la función verificará el estilo de despligue “block o none” y lo cambiará a su inverso .

Este es el código de la función:

/*
Nombre: Mostrar/Ocultar capas
Parámetros:
        nombreCapa: el id de la capa
Autor:  Willy Peitzner R.
E-mail: wpeitzner@gmail.com
Fecha:  2007-12-05
*/
function Mostrar(nombreCapa)
{
  if (document.getElementById(nombreCapa).style.display == “block”)
  {   
    document.getElementById(nombreCapa).style.display = “none”;
  }
  else
  {  
    document.getElementById(nombreCapa).style.display = “block”;
  }
} 

La función se encargará de verificar el despliegue, al ser “block” el usuario podrá ver la información.

Explore posts in the same categories: JavaScript

Tags: JScript

You can comment below, or link to this permanent URL from your own site.