Editorial
Capas visibles e invisibles
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>
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
[email protected]
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
Cualquier consulta que tengan sobre el còdigo deben visitar la pàgina del autor: http://www.cssboulevar.com.ar
salu2
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 [email protected]
no se como poner todo eso junto en un HTML en mi piczo
podrias poner el codigo en html para ver como queda plis. es para verlo funcionando
¿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?
lo voy a probar…