Capas visibles e invisibles

08.03.2005

Capas visibles e invisibles

Por Federico Elgarte | 22,887 Lecturas
Archivado en: CSS

Con un poco de imaginación e Ideas con Estilo te presentamos un pequeño ejemplo con el que puedes elaborar capas visibles e invisbles.

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 un ejemplo en marcha…

Califica esta nota:

(No hay votos aún)

Loading ...

Sobre el autor

Federico Elgarte
Webmaster de cssboulevar.com.ar

Comentarios

7 comentarios en total.

Eslait 28.03.2005 - 05:03 - #

he probado este script y está muy bien. El pequeño problema que tengo que es que gustaría adaptarlo a mi web pero como no sé programar pues voy a tener que ir probando e investigando.

Mi idea es hacer una especie de post it en la página de inicio. Por lo tanto, en relación a este artículo, tendría que aparecer la capa visible desde el primer momento. Luego, donde pone “esconder capa” tendría que estar escrito dentro de la misma de tal manera que cuando alguien ya ha leido el aviso tuviera opción de cerrar la capa con un solo click (esto si que lo he conseguido)

Pero repito, el efecto es muy bueno.

un saludo

eslait@yahoo.es
holmes 30.03.2005 - 14:02 - #

Que tal Federico

Muy bueno este código tenia tiempo buscandolo, quisiera saber que debo hacer para que me aparezca visible de una vez.

Saludos
No Registrado 30.03.2005 - 15:07 - #

Cualquier consulta que tengan sobre el còdigo deben visitar la pàgina del autor: http://www.cssboulevar.com.ar
salu2
Diego Malave 06.06.2006 - 15:14 - #

alguien me podria decir como puedo implementar este codigo con varias capas a la ves??, es decir este mismo codigo pero que trabaje con capas independientes por favor responder a diego_mal_182@venezuelasite.com
juan rodriguez 24.06.2006 - 15:43 - #

no se como poner todo eso junto en un HTML en mi piczo
Daniela 05.10.2006 - 17:39 - #

podrias poner el codigo en html para ver como queda plis. es para verlo funcionando
Daniel 29.08.2007 - 14:07 - #

¿Cómo puedo hacer para que la capa se haga visible, unos segudos después de que se cargue la página e invisble, luego de mostrarse por otros tantos segundos?