Capas visibles e invisibles

Como primera instancia hay que definir las propiedades de la capa. 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

Deja un comentario