ESPAÑOL: ¡Bienvenido! Es la página inicial de OSIRIS LMS. Regístrese hoy mismo y obtenga acceso a todos nuestros CURSOS GRATUITOS. Clic aquí para registrarse ya. Hemos desarrollado una amplia gamma de cursos “online” (Programación, Multimedia, 3D, Habilidades suaves, etc.), disponibles 24X7. Para más detalle consulte la lista de Cursos Disponibles. Si tiene problemas con el acceso a la plataforma, vea el Tour Virtual de Osiris LMS. También puede consultar la sección de FAQ’s o enviar Solicitud de Soporte Técnico.

ForoForo de discusión
¿Cómo mostrar y ocultar bloques de HTML?
Buscador:
Foro > JavaScript > ¿Cómo mostrar y ocultar bloques de HTML?

Enviado por: Texto del mensaje
Support Osiris LMS 
Nivel : Jefe de Administradores
Mensajes : 114
> Perfil
Escrito el : Lunes 31-05-2010 A las : 17:35 ( > un mes )
Asunto : ¿Cómo mostrar y ocultar bloques de HTML?
Problema

A veces queremos que una parte de la página pueda permanecer oculta a la vista del visitante, y que sólo se muestre bajo determinadas condiciones, algo así como ocurre con el atributo ALT de las imágenes insertadas en las páginas HTML. Por ejemplo podemos tener una lista de enlaces tales que al pasar el ratón muestren una ventana o etiqueta explicativa del destino de ese enlace.

Solución

Los bloques DIV poseen un atributo style que permite, entre otras muchas cosas, convertirlo en invisible o visible a nuestra voluntad. Esta propiedad del atributo style es la llamada visibility, que puede tener dos valores visible o hidden. En el primer caso el bloque se muestra en la página como fue escrito mientras que en el segundo no se muestra, aunque ocupa su espacio en la página. Para cambiar de uno a otro estado basta con modificar el valor de esta propiedad.

Caso práctico

Como ejemplo para aclarar el uso de este mecanismo de ocultación usamos una página con un enlace tal que al pasar el ratón por encima muestre una etiqueta explicativa, que quedará oculta al retirar el ratón.

Primero creamos el bloque DIV en la página:

<DIV style="visibility: hidden">Explicación aclaratoria del enlace</DIV>

Observa que el bloque lleva un atributo ID para identificarlo dentro de la página. La propiedad style.visibility está puesta en hidden.

Ahora colocamos el enlace al que se referirá el bloque anterior:

<a href="opcion.htm" onmouseout="document.all.etiqueta.style.visibility='hidden' ">El enlace</a>

En lugar de style puedes usar un estilo CSS para, además de ocultarlo, darle el formato que prefieras al bloque DIV, sólo cambiará el código HTML de este elemento, los eventos permanecen igual.

<DIV>Explicación aclaratoria del enlace</DIV>

Nota: Netscape hasta la versión 4 usaba document.layers en lugar de document.all, mientras que en la versión 6 los bloques DIV pasan a ser objetos que pueden localizarse mediante el método standard document.getElementById("atributoID"), método aceptado igualmente a partir de la versión 5 de IExplorer.
Soporte de Osiris LMS
Amplía tus conocimientos en línea