Imagen que se agranda al pasar el cursor (efecto onmouseover)
Tras haber explicado anteriormente el truco para agrandar imágenes con efecto deslizante, recibí dos correos en los que me preguntaron si sería posible realizar lo mismo pero sin el efecto.
Naturalmente, la respuesta es sí. A decir verdad, descubrí una forma muy sencilla de realizar este truco, curiosamente mientras le daba un vistazo a todas las propiedades que aparecen en las imágenes subidas con blogger.
Pasa el cursor por la imagen para ver el resultado:
Para aplicarlo en tu blog sólo tienes que insertar la siguiente línea:
Sustituye URL DE TU IMAGEN por la dirección de tu imagen. Si no sabes cómo obtenerla, mira en esta entrada.
Imagino que tu imagen no tendrá el mismo tamaño que la del ejemplo, por tanto, debes modificar las cifras del código:
Los números marcados en verde (312 y 145) indican el ancho (width) y el alto (height) que tendrá la imagen al pasar el cursor sobre ella.
Los segundos números, marcados en rojo (72 y 156) indican el ancho (width) y el alto (height) que tendrá la imagen encogida, es decir, la captura.
Deberás cambiarlos por valores que se adapten a tu blog (teniendo en cuenta que los rojos deben incluirse dos veces).
Si te das cuenta, estas cifras son la mitad de las cifras en color verde, por tanto la imagen aparecerá con la mitad de su tamaño original.
Naturalmente, la respuesta es sí. A decir verdad, descubrí una forma muy sencilla de realizar este truco, curiosamente mientras le daba un vistazo a todas las propiedades que aparecen en las imágenes subidas con blogger.
Pasa el cursor por la imagen para ver el resultado:
Para aplicarlo en tu blog sólo tienes que insertar la siguiente línea:
<center><img width="72" height="156" style="cursor: -moz-zoom-in;" src="URL DE TU IMAGEN" onmouseover="this.width=145;this.height=312;" onmouseout="this.width=72;this.height=156;" /></center>
Sustituye URL DE TU IMAGEN por la dirección de tu imagen. Si no sabes cómo obtenerla, mira en esta entrada.
Imagino que tu imagen no tendrá el mismo tamaño que la del ejemplo, por tanto, debes modificar las cifras del código:
Los números marcados en verde (312 y 145) indican el ancho (width) y el alto (height) que tendrá la imagen al pasar el cursor sobre ella.
Los segundos números, marcados en rojo (72 y 156) indican el ancho (width) y el alto (height) que tendrá la imagen encogida, es decir, la captura.
Deberás cambiarlos por valores que se adapten a tu blog (teniendo en cuenta que los rojos deben incluirse dos veces).
Si te das cuenta, estas cifras son la mitad de las cifras en color verde, por tanto la imagen aparecerá con la mitad de su tamaño original.
¡Suerte!
0 comentarios:
Publicar un comentario
¡Gracias por comentar!