Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Ventana de popup que muestra la imagen completa al pasar el cursor

Con este truco podrás crear un popup o ventana emergente personalizado que mostrará una imagen en su tamaño real al pasar el cursor por una captura de ésta.

Para aplicar el truco en tu blog sigue los siguientes pasos:


Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta ]]></b:skin> y encima inserta estos bloques de CSS para dar estilo al popup:

/* Pop-up imagenes
------------- */
#popupimagen{
border: none;
position: relative;
background: transparent;
z-index: 0;
}

#popupimagen:hover{
background: transparent;
z-index: 60;
}

#popupimagen span{
visibility: hidden;
background-color: #ffffff;
padding: 4px;
border: 3px double #DEDEDE;
left: -1150px;
color: #8C8C8C;
position: absolute;
text-decoration: none;
}

#popupimagen:hover span{
top: -100px;
visibility: visible;
left:150px;
}

#popupimagen span img{
padding: 2px;
border: none;
}
/* Fin pop-up imagenes
------------- */

Seguidamente guarda la plantilla:




Ahora, siempre que quieras poner el popup en una imagen deberás usar este código:

<a id="popupimagen" href="#">
<img src="URL DE TU IMAGEN" border="0" height="90" width="100"/>
<span>
<img src="URL DE TU IMAGEN"/>
</span>
</a>

Y lo puedes pegar tanto en una entrada como en un gadget (elemento de página) html-javascript.

Sustituye URL DE TU IMAGEN por la dirección de tu imagen [+] en ambos casos.

Puedes editar el tamaño que tendrá la imagen reducida, es decir, la captura. Para ello cambia los valores 90 (que es la altura) y 100 (que es la anchura) por el tamaño que desees.

Publica la entrada y obtendrás este resultado:




Nota:

Para no tener que estar copiando y pegando el código en una entrada cada vez que quieras poner el popup a una imagen, puedes hacer uso de la plantilla de entrada.

¡Suerte!

Bleid dice...

Hola Jaime
muy buena la entrada
tengo un problema y no se si me puedes ayudar
querria cuadrar en mi blog, la imagen de mi cabecera para que quede justo en el espacio de la cabecera, es decir que no quede espacio entre la cabecera y los laterales pero que no ocupe la parte inferior no se si me explico.Ademas de coloque un fondo negro a la cabecera que no se como quitar
mi blog es http://bleid-volandovoy.blogspot.com, ya me has hechado una mano otras veces
un saludo y muchas gracias

Yo dice...

Este está muy bueno; hay que probarlo. Gracias Jaime :)

Jaime Trujillo Escobedo dice...

Gracias bleid. Verás, al parecer la imagen de la cabecera es demasiado larga y no lo suficientemente ancha.

Si lo deseas puedes "alargar" la imagen (lo que resultaría un poco complicado) u optar por encoger la cabecera (pero también se debe encoger el título).

Lógicamente, también puedes buscar otra imagen para "adaptarla" mejor.

Jaime Trujillo Escobedo dice...

Muchas gracias a tí Yo, por comentar.

Anónimo dice...

¡Hola Jaime!

Excelente truco, gracias por tus aportes :)

Tengo un problema: mis imágenes, al pasar el cursor, "se cortan"...
Quería saber qué tengo que modificar en la plantilla, o sacar, agregar, etc. O si tendría que ser más chica la imagen (cosa que no querría :P ya que es un blog de dibujos)

Te dejo mi blog para que se entienda mejor mi caso: http://guanki.blogspot.com/search/label/Dragon%20Ball%20GT

Muchas gracias de antemano, espero que se pueda hacer algo :D

¡Saludos!

E.G.

Anónimo dice...

¡Hola nuevamente!

Disculpá las molestias...

Te quería avisar que ya no tengo el problema, pero no lo solucioné, simplemente decidí cambiar de estilo mi Blog, o sea, subí otra plantilla, y la verdad que no esperaba que se pudiese ver bien la imagen, aunque lo pensé porque esta plantilla es más amplia :)

Bueno, gracias y felicitaciones por el Blog!!

Saludos...


E.G.

Jaime Trujillo Escobedo dice...

Entonces me alegro de que lo hayas podido solucionar, guanki. Si tienes alguna otra duda puedes escribirla en un comentario ;).

¡Abrazos!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo