Ampliar imágenes con efecto onmouseover


Hace un tiempo habíamos visto cómo ampliar las imágenes, pero haciendo clik. Hoy veremos una forma muy sencilla de ampliar las imágenes con sólo pasar el mouse sobre la imagen.

Lo único que tendremos que hacer será pegar el siguiente código en la entrada cada vez que deseemos poner alguna imagen con este efecto. El código es el siguiente:

<img src="URL-IMAGEN" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

Explicación:

» "this.width=400;this.height=300;" es el ancho y alto que tendrá la imagen cuando se agrande.
» "this.width=200;this.height=150;" width="200" height="150" es el ancho y alto de la imagen reducida. Recordar que en este caso ambos width y height deben ser iguales.

Ejemplo:



Referencia : 86707359.at.webry

10 opinaron:

La inquisidora

El efecto es muy bueno; muy elegante, y además muy sencillo de hacer :)

Responder
Yessmi

Me encanta el efecto, de ahora en adelante lo usaré para todas mis imágenes

Responder
squirrel

Genial, justo lo que buscaba y qué sencillo es creí estas cosas serían complicadas, pero nada que ver.

Besos y gracias por la ayuda que nos brindas :)

Responder
Juan Carlos P

Lo usé y quedó genial!

Responder
Unknown

hola tesoro :D
pensé que era muy complejo, pero veo que no...lo suelo ver en las páginas de imágenes y es genial...besitosss

Responder
Jéssica YK

» La inquisidora: tienes razón :)

» Yessmi: me alegro.

» squirrel: como viste, no es muy complicado de hacer :)

» Juan Carlos: me alegro :)

» Graciela: me alegra que te haya gustado.

S@lu2

Responder
Administradores

muy bueno, es casi igual a lo que ando buscando que encontre aqui: http://solopruebas3.blogspot.com/2010/03/blog-post.html

alguien me da el enlace en donde diga como hacer lo q aparece en el link q cité, por favor?

gracias. ambis trucos estab muy buenos =)

Jéssica YK

» Quary:
Es similar sólo que le han agregado un script para darle un efecto deslizante.

En mi blog tengo algo similar, sólo que en lugar de un script , usa la librería jQuery. Puedes chequear esta entrada: http://diyva.blogspot.com/2010/01/galeria-de-imagenes-con-jquery.html

S@lu2

Responder
.

muchísimas gracias por el tutorial, me ha servido de mucho :D

Jéssica YK

» Anabel:
Qué bueno que te sirvió el tutorial. Gracias a ti por la visita y por el comentario (:

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio