Capas visibles e invisibles con CSS

Una capa es un contenedor en la página Web que contiene elementos de página HTML. El uso de capas en la página proporciona mayor control y flexibilidad para hacer la página dinámica. Las capas se crearon para el diseño Web con el fin de proporcionar a los diseñadores un control y una flexibilidad similares a los que tenían en el diseño tradicional para impresión.

Las capas pueden apilarse una encima de otra, ocultar unas capas y mostrar otras, o mover una capa por la pantalla con una línea de tiempo. Por ejemplo, puede haber una imagen de fondo en una capa y luego apilar encima otra capa que contenga texto. En la página también puede haber imágenes que aparecen y desaparecen de la página.

En el caso que nos corresponde, como primera instancia hay que definir las propiedades de la capa CSS. En ella también podremos poner información, imágenes, links, etc.

#pantalla {position: absolute; width: 50%;

     height: 50%; background:url(imagen.gif) 

     no-repeat fixed center;   border: 1px solid}

Una vez definida la capa debemos insertarla en nuestro documento html de la siguiente manera:

<div id="pantalla"></div>

…y colocar dos enlaces para activar y desactivar el efecto:

<a href="javascript:closeit()">Mostrar capa</a>

<a href="javascript:showit()">Esconder capa</a>

Ahora solo resta insertar el script:

<script>

var once_per_browser=0

var ns4=document.layers

var ie4=document.all

var ns6=document.getElementById&&!document.all

if (ns4)

crossobj=document.layers.pantalla

else if (ie4||ns6)

crossobj=ns6? document.getElementById("pantalla") : 

document.all.pantalla

function closeit(){

if (ie4||ns6)

crossobj.style.visibility="visible"

else if (ns4)

crossobj.visibility="show"

}

function get_cookie4(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie4.length > 0) {

offset = document.cookie4.indexOf(search)

if (offset != -1) { // if cookie4 exists

offset += search.length

// set index of beginning of value

end = document.cookie4.indexOf(";", offset);

// set index of end of cookie4 value

if (end == -1)

end = document.cookie4.length;

returnvalue=unescape(document.cookie4.substring(offset, end))

}

}

return returnvalue;

}

function showornot(){

if (get_cookie4('postdisplay')==''){

showit()

document.cookie4="postdisplay=yes"

}

}

function showit(){

if (ie4||ns6)

crossobj.style.visibility="hidden"

else if (ns4)

crossobj.visibility="hide"

}

if (once_per_browser)

showornot()

else

showit()

</script>

Ver ejemplo en marcha