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:
El efecto es muy bueno; muy elegante, y además muy sencillo de hacer :)
Me encanta el efecto, de ahora en adelante lo usaré para todas mis imágenes
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 :)
Lo usé y quedó genial!
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
» 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
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 =)
» 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
muchísimas gracias por el tutorial, me ha servido de mucho :D
» Anabel:
Qué bueno que te sirvió el tutorial. Gracias a ti por la visita y por el comentario (:
S@lu2
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.