Color
Color
Color
Color

Capas visibles e invisibles

Por Federico Javier Elgarte. Webmaster de CSSboulevar





Recursosfree.com

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 en marcha


03

1 comentarios

Por Trine | trine.michelsen [@] ergon.es
El ejemplo está muy bien pero sería genial si hubiese tb alguno en el cual el link estuviese en una capa con una imagen como fondo, sin tener el tipico texto de enlace. Al hacer el mouseover la capa cambia por otra que esta hidden y al hacer click en esa capa se abre una nueva ventana

Todos los ejemplos que veo por la red de son de enseñar/esconder una capa clicando en un texto pero no hay nada de como programar en javascript para que esto se haga clicando en una capa que tiene una imagen como fondo.... No se si me explico?!

Un saludo

Escribe un comentario sobre este artículo


    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/cssboule/public_html/articulos/index.php on line 175

    Warning: mysql_free_result(): supplied argument is not a valid MySQL result resource in /home/cssboule/public_html/articulos/index.php on line 181
    Script error: local_152429.xml does not exist. Please create a blank file named local_152429.xml.