Mostrar/ocultar capas con Javascript
Escrito por J.F. el Jueves, 13 de Septiembre del 2007 a las 19:53
El siguiente script puede resultarnos muy útil a la hora de mostrar/ocultar ciertos elementos en una página web. Por ejemplo, si quisieramos que pinchando en un enlace una capa que contuviera una tabla, una imagen, o cualquier cosa que queramos se ocultara, simplemente debemos jugar con el atributo visibility, poniéndolo a visible(para mostrarlo) o a hidden(para ocultarlo).La forma común de cambiar la visibilidad de una capa es la siguiente:
Ocultar:
document.getElementById('nombre_div').style.visibility = "hidden";
Mostrar una capa oculta:
document.getElementById('nombre_div').style.visibility = "visible";
Todo ello con Javascript. Simplemente con un poco de imaginación podemos conseguir efectos realmente llamativos. Aquí tienes un código extremadamente simple que sirve para ilustrar el tema:
-
<script LANGUAGE="javascript">
-
function oculta(){
-
document.getElementById('capa1').style.visibility = "hidden";
-
}
-
function muestra(){
-
document.getElementById('capa1').style.visibility = "visible";
-
}
-
</script>
-
</head>
-
<div id="capa1" style='position:relative;'>
-
Esta es la capa 1
-
</div>
-
-
<a href="#" onclick="oculta()">Oculta la capa 1</a>
-
<a href="#" onclick="muestra()">Muestra la capa 1</a>
-
-
</body>
-
</html>
Categoria: Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Deja un comentario
