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.

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:

<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!

Yo dice...

Mucho mejor así, sin el efecto. :D

Jaime Trujillo Escobedo dice...

Yo, este truco es mucho más sencillo que el anterior y no es necesario adentrarse en la plantilla ;).

La Trucoteca dice...

Hola Jaime!
Este truco nos puede venir de perlas para nuestro blog. De todas formas el efecto del truco anterior que pusiste para esto me parece todavía más elegante. :)
Pero claro, todas las opciones, bienvenidas sean :D jajajaja.
Muchos saludos y abrazos!!!

Fabiana dice...

:) ¡Qué buen efecto! muy buena la idea, sin recargar para nada la plantilla de más scripts como la mía :(( que cada vez está más pesada...
Muy útil el aporte, muchas gracias, un abrazo desde Uruguay.

Jaime Trujillo Escobedo dice...

La Trucoteca de Blogs, espero que así sea :D.

Es cierto que el otro truco puede resultar más elegante, aunque por otro lado, con este no es necesario insertar un script en la plantilla.

Jaime Trujillo Escobedo dice...

Fabiana, ¡cuánto tiempo! me alegra que te guste.

No se si tu plantilla estará pesada por dentro, pero por fuera ¡está preciosa!.

Abrazos desde España.

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