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:
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:
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
Este está muy bueno; hay que probarlo. Gracias Jaime :)
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.
Muchas gracias a tí Yo, por comentar.
¡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.
¡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.
Entonces me alegro de que lo hayas podido solucionar, guanki. Si tienes alguna otra duda puedes escribirla en un comentario ;).
¡Abrazos!