Cubrir una capa con otra que se puede ocultar con un click | Oloblogger Con este código lo que haremos será solapar una capa con el contenido que queramos, por encima de ot...

28 de noviembre de 2011

Cubrir una capa con otra que se puede ocultar con un click

Con este código lo que haremos será solapar una capa con el contenido que queramos, por encima de otro elemento del blog. En un primer ejemplo, esa capa solapada que se podrá cerrar con un click, la vamos a hacer translúcida, de manera que se podrá ver parcialmente la información que estuviera debajo. En otros ejemplos veremos otros casos posibles con el mismo sistema

Para ello vamos a usar un JavaScript básico que ya hemos utilizado en otras ocasiones y que por tanto, es posible que ya tengáis en vuestra plantilla. Se trata de un pequeño CSS con las clases visible e invisible y que precisamente hace que la capa bajo esa clase se vea o no se vea.

Seguido viene una función (plegardesplegar) que intercambia estas dos clases cuando nos sea necesario. Con estas dos cosas podremos conseguir a golpe de ratón, que una capa pueda desaparecer.

Este es el trozo que habría que insertar antes de vuestro </head>. Si lo tenéis, evidentemente no será necesario este paso:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var elemento = document.getElementById(identificacion);
if(elemento.className == "visible"){
elemento.className = "invisible";
}
else{
elemento.className = "visible";
}
}
</script>

Para este caso concreto, a continuación añadimos en el mismo sitio el estilo para la capa que quedará superpuesta por encima:

<style type='text/css'>
#capasuperior {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99;
opacity: 0.8;filter: alpha(opacity=80);
background: #000000;
}
</style>

Según el uso que le vayáis a dar a esto, puede que queráis cambiar el background por una imagen o modificar e incluso suprimir la transparencia (opacity).


Ahora es cuando tenemos que localizar nuestro elemento a ocultar con la capa semitransparente. Supongamos un caso fácil en el que queremos "tapar" una imagen que tenemos en un post. El código que aparecerá por defecto para una imagen está marcado en gris. Lo demás es precisamente lo que tendremos que añadir y para distinguirlo, está marcado con negrita:

<div class="separator" style="clear: both; text-align: center;position:relative;>

<div class="visible" id="capasuperior">
Aquí iría el contenido que queremos mostrar por encima del otro elemento. Podemos darle estilo metiéndolo a su vez dentro de un SPAN o en otro DIV
<p><a href="javascript:plegardesplegar ('capasuperior');">CERRAR [X]</a></p>
</div>


<a href="http://1.bp.blogspot.com/-2CKzJa0Qvgg/TtFBGqNHwGI/AAAAAAAAPow/Qab0-RUYAFs/s1600/Sunrise1.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em;"><img border="0" height="301" width="400" src="http://1.bp.blogspot.com/-2CKzJa0Qvgg/TtFBGqNHwGI/AAAAAAAAPow/Qab0-RUYAFs/s400/Sunrise1.jpg" /></a></div>

Importante insertar en la capa original (la que quedará inicialmente por debajo) un position:relative; tal y como se ve aquí arriba. Si no está contenida en un DIV y no podemos añadir ese atributo, entonces la tendremos que meter en uno tal y como veremos en el ejemplo posterior a este.

PINCHA EN "CERRAR" PARA VER LA BONITA IMAGEN QUE TE HEMOS PREPARADO.



La utilidad de esto puede ser distinta según vuestras necesidades. Por ejemplo a José le venía bien tapar cierto gadget de la barra lateral y que sólo se descubriera al pinchar sobre él.

Para hacer esto buscaríamos el código del gadget en la plantilla (con Expandir Plantillas de Artilugios seleccionado) y repetimos lo hecho anteriormente. Ahora tenemos en cuenta que el artilugio estará entre etiquetas WIDGET y que no contará con ningún sitio dónde podamos añadir el position:relative;, por lo que añadimos un DIV que englobe por entero el código del gadget tal y cómo habíamos mencionado anteriormente:

<b:widget id='Slideshow1' locked='false' title='Presentación' type='Slideshow'>
<b:includable id='main'>


<div style='position:relative;'><!-- DIV añadido -->
<div class='visible' id='capasuperior'>
Aquí iría el contenido que queremos mostrar por encima del gadget.
<p><a href='javascript:plegardesplegar ("capasuperior");'>CERRAR [X]</a></p>
</div>


<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId + &quot;_slideshow&quot;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>


</div> <!-- Cierre DIV añadido -->

</b:includable>
</b:widget>


También se podría utilizar para plantear algún tipo de noticia, juego o acertijo, de manera que al pinchar se revele el contenido oculto:





Los milagros del maquillaje.
¿Quién es esta famosa cantante y actriz?

Descubrir nombre



Correcto. Esta es...
¡Jeniffer López!


Bueno, son cosas que sirven para ir aprendiendo a manejarse con el HTML, JavaScript y CSS. Quizás ahora no os haga falta para nada, pero recordando que esto se puede hacer, cualquier día os puede sacar de un apuro... al igual que con todo lo que vamos explicando.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

33 comentarios :

  1. Impecable no lo tenia a esa propiedad hover.
    Oloman te deje un coment en lo de la galeria, es que no se como centrarla y alinear las miniaturas q aparecen en escalera.
    Un abrazo.

    ResponderEliminar
  2. A propósito de JLo, es sorprendente lo que hace el maquillaje ¿verdad? te puede hacer quitar media docena de años de encima ahaha, claro, en conjunto con el cuerpo, un cuerpo esbelto siempre te hará lucir más joven, en adición a tu actitud, expresiones, lenguaje corporal, verbal etc, bueno, tal parece que ya estamos desviándonos mucho del tema, pero así es esto ¿que le vamos a hacer?

    ResponderEliminar
  3. Mil gracias, amigo Oloman.

    En estos días estaré probando el artilugio y te avisaré para que te des una vuelta.

    Saludos.

    ResponderEliminar
  4. Martin, estoy suscrito a todas las entradas por lo que no me pierdo ninguno de vuestros comentarios aunque estén en posts antiguos. Ya te contesté, aunque necesito ver funcionando el asunto si no te sirve lo que dije.

    Chiknaui, Graciela, es una bobada -como casi todo lo que hago- pero puede que sea de utilidad para alguien :)

    De esas cosas sabéis normalmente más las mujeres Karla, pero sí que siempre me ha sorprendido cómo cambiáis algunas tras una sesión de "chapa y pintura" ;)

    OK José. Me alegro de que cuentes con esto y de que te pueda servir.

    ResponderEliminar
  5. hola oloman, tengo una duda y lo estado intentando de varias formas y no puedo, bueno te explico, en la capa superior que es la de opcion con cerrar a mi me gustaria que en lugar de el enlace cerrar se cerrara al hacer click a un boton de megusta de facebook, no se si eso sea posible, te agradeceria mucho si me pudieras ayudar.

    Saludos

    ResponderEliminar
  6. Hmmm... Eso que pides es muy raro Thejigg0695 ¿Pinchar en un "Me gusta" y cerrar una capa después? ¿Es una forma de que sólo puedan ver algo si primero se hacen fan de una página?
    Si es un botón auténtico (el de Facebook) cuando pinches en él se ejecutará el código de Facebook y ese no se puede modificar así como así para incluir otro tipo de código como el de cerrar una ventana.

    ResponderEliminar
  7. Thejigg0695, pues sí, lo entendí bien, aunque me extrañaba que eso se pudiera hacer.

    He encontrado formas de hacerlo en páginas Facebook, pero no en blogs. Aquí tienes un ejemplo: Crear contenido condicionado.

    Bueno, en blogs sí que hay un sistema, pero es de pago: Like Loker. Lo hay también en versiones para otras plataformas.

    ResponderEliminar
  8. Gracias oloman seguire intentando... Saludos

    ResponderEliminar
  9. Thejigg0695 si lo consigues y te apetece, me lo cuentas y lo difundimos por aquí. Saludos.

    ResponderEliminar
  10. Oloman. Ya he implementado varios de tus trucos con mucho éxito y en esta oportunidad quiero retomar la inquietud de Thejigg0695. Quisiera ubicar una capa traslucida sobre, por ejemplo, un vídeo, que contenga un gran botón "Me gusta" de Facebook y otro botón que permita cerrar la capa, para que el visitante no se sienta obligado sino tentado.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Pues puede que hayamos encontrado un método: Superponer elementos sobre capas embebidas e iframes. Con eso sería sólo cuestión de poner una capa como esta por encima del vídeo y dentro un botón de facebook más el enlace para el cierre que se explica aquí.

      Eliminar
  11. Hola Oloman. Como puedo poner esta capa sobre un reproductor de video flash "Flowplayer" ya lo intente tal como aqui lo explica, pero me aparece la capa debajo del reproductor. como el codigo del reproductor no estaba contenido en un div lo hice como se haria con un gadget pero aun no me funciona. sigue apareciendo debajo.

    ResponderEliminar
  12. hola oloblogger me gustaria poner un png (http://imageshack.us/photo/my-images/818/designers004.png/) justo encima de donde termina el titulo de mi pagina...te advierto q el codigo de mi blog es algo diferente.

    ResponderEliminar
    Respuestas
    1. Me suena esa plantilla :D Por favor, haz una captura de tu blog y luego monta en ella la imagen que quieres poner para que sepa exactamente qué quieres hacer.

      Eliminar
  13. Hola yo lo e intentado muchas veces y no me sale, no se en que estoy fallando me podrian ayudar?????

    Al terminar de insertar el codigo me sale la capa que deberia cubrirlo arriba y la imagen por debajo de la imagen

    http://chistesyvideosderisa.info/videos/bromasychistes/camaraescondida/1/copiade5.elsostencaliente1.html

    o en otro intento la capa que cubre mi contenido no cierra

    http://chistesyvideosderisa.info/videos/bromasychistes/camaraescondida/1/copiade5.elsostencaliente2.html

    No se cual sea mi error. Me pueden ayudar??????

    ResponderEliminar
    Respuestas
    1. El primer enlace está bien, pero te faltan una comillas al final de esta línea. Lo he marcado en negrita. Seguramente, eso esté causando el fallo:

      <div class="separator" style="clear: both; text-align: center;position:relative;">

      Eliminar
  14. Hola, a mi no me queda bien, disculpen no soy un experto, el segundo código no me queda claro donde hay que pegarlo

    ResponderEliminar
    Respuestas
    1. El segundo trozo va a continuación del primero y ambos debes insertarlos antes del </head>

      Eliminar
  15. Gracias Oloman, problema resuelto. Saludos

    ResponderEliminar
  16. con esto se podria hacer esto que pasa una pagina intermedia. Te pongo un ejemplo cuando vas aqui:
    http://www.mariobross.info/mario-vs-donkey-kong/ y le das a jugar te vas a otra pagina donde esta el juego.
    Se podria hacer esto en blogger? Gracias

    ResponderEliminar
    Respuestas
    1. A ver. Lo que me pasas como ejemplo es un simple enlace que lleva a otra páginas, sin más.

      Si quieres hacer una página inicial y desde ahí desviar a un sitio a otro, quizás te convendría algo como esto

      Eliminar
  17. hola, buenas noches;
    estoy intentando hacer que un conjunto de capas DIV PA se habran segun voy clicando en un menu spry.
    tengo un container, donde dentro he añadido una DIVPA para el menu a la izq i otro DIV PA a la derecha. quiero que cuando clique en el menu pongamos elemento 1, elemento 2 y elemento 3, que cada uno de ellos muestre una de las capas solapadas a la derecha y oculte las demas. ya que con el indice z si quiero ver la que esta mas abajo ya no me la deja ver porque he echo clic en el enlace del menu que corresponde a una capa con un mayor indce z.
    he estado intentando darle un comportamiento pero solo me permite mostrar y ocultar en un click, no al cambiar de elemento del menu.

    Se que esto es posible mediante marcos. linkando cada boton del menu y que se habra en uno de los marcos. pero no lo consigo con las Div pa. :(
    es possible???

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. ¡Bufff! No hablo tu idioma Clara. No entendí nada con tantas siglas. No sé que es un PA ni un menú SPRY y a partir de ahí ya me resulta imposible seguirte ¿Dónde tienes ahora mismo eso que lo vea y pueda seguir lo que me explicas?

      Eliminar
  18. hola amigo gracias por compartir esta información esta muy bien explicada pero tengo una duda existe la posibilidad de poner un temporizador en caso de que no quieran darle click a la imagen no se, si me explico lo que quiero es que si la persona no se quiere dar click a la imagen tenga que esperar 30 segundos esto se puede.?

    ResponderEliminar
    Respuestas
    1. Eso ya sería otra historia y seguramente habría que usar JavaScript. Aquí sólo pretendía explicar cómo solapar un elemento sobre un iframe, cosa que a veces da problemas. Supongo que eso lo quieres para forzar un clic ;)

      Eliminar
  19. Como hago para que no me cubra todo la entrada, si no que solo me cubra lo que yo quiera y que el resto quede normal..? Ayuda..!

    ResponderEliminar
    Respuestas
    1. Brayan, eso es precisamente lo que se explica y se ve en los dos ejemplos que puse operativos. Sólo tienes que ir siguiendo las instrucciones.

      Eliminar
  20. Buen día espero puedan ayudarme tengo una pregunta no se como hacer esto quisiera ayuda consejos. Quiero hacer esto: tengo un blog en internet y quiero usar una imagen para tapar un anuncio de publicidad para una compañía que trabajo en Venezuela ellos me pagan algo por cada click que recibe la publicidad entonces necesito hacer que una imagen que tengo tape un anuncio de publicidad osea él anuncio estará tapado por la imagen y necesito que esta imagen al darle click él click traspase la imagen con un cuchillo o una bala como quieras verlo.. Y él click caiga en la publicidad.. Osea hacer que mi imagen le traspasen los clicks como si no estubiera allí! Para que le den click al anuncio.. Quiero hacer esto con. La imagen porque no puedo manipular los anuncios directamente con códigos o scrips ya que me detectaran y sancionaran pero si vagos esto con la imagen no podrán detectar nada porque no estoy manipulando él anuncio.. Entonces mi pregunta es esa@ como puedo hacer para crear esto.. Que la imagen quede asi que él click que le den las personas caiga al anuncio que esta abajo.. Ayudenme pleasse

    ResponderEliminar
  21. Hola Brujo. Te has explicado perfectamente, pero desgraciadamente no sé cómo se podría hacer eso. Si tuviera que apostar, apostaría a que no se puede hacer... o al menos no sería sencillo. Lo siento.

    ResponderEliminar