| |
|
| El 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. |
| La 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 tro estado basta con modificar el valor de esta propiedad. |
| Un 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. <DIV ID="etiqueta" 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. <a href="opcion.htm" onmouseover="document.all.etiqueta.style.visibility='visible'
" 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 ID="etiqueta" class="miestilo">Explicación aclaratoria del enlace</DIV> OJO: 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. |