ARTICULOS

Capas visibles e invisibles

Autor: Federico Javier Elgarte (http://www.cssboulevar.com.ar/) - 27/06/2005

Del.icio.us Facebook Technorati

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

 

Más artículos sobre Hojas de Estilo

1. Crear página centrada sin usar tablas
2. Capas visibles e invisibles
3. Obtener sombras con CSS
4. Formularios accesibles XHTML y CSS
5. Cambiar el cursor del Mouse
6. Formularios basados en retículas CSS
7. Mejorando la apariencia de los formularios
8. Efectos en textos e imágenes con CSS
9. Menus simples con CSS y listas
10. Scroll con hojas de estilo CSS
Más artículos...

Otros artículos...

PHP Instalación de phpMyAdmin
Servidores Instalación del servidor Apache bajo Windows
Bases de Datos Exportar datos de MySQL a Access
Servidores Enlaces usables en nuestro sitio
PHP Huevos de Pascua en PHP
Fireworks Fundir imágenes con Fireworks
ASP.net Detectar país del usuario
Java Script Deshabilitar el botón derecho del mouse
PHP Rotador de banners con estadísticas
PHP Números aleatorios en PHP
Más artículos...