Agrandar la imagen al pasar el cursor

Aquí nuestro querido amigo, seguidor de Blogger Código, me ha pedido un código responsable de agrandar una imagen pequeña con tan solo pasar el ratón por encima de la imagen, entonces no tarde mucho en crear este post, querido amigo y el resto de los queridos espero que os resulte útil este código.
Ejemplo; pasa el cursor por encima de la imagen:


Es muy sencillo el código y la utilización del mismo, tan solo debes personalizarlo a tu gusto.
<img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />

  • Cambiar la URL de la imagen (en su tamaño normal).
  • El primer width y height es el tamaño que queremos que sea la imagen una vez agrandada, al pasar el cursor, width es el ancho y height es el alto.
  • Los width y height que están en color verde son el ancho y alto de la imagen en tamaño pequeño, como quedaría antes de agrandar la imagen (antes de pasar el cursor por encima).

Bueno eso es todo, dedicado a Eduardo_mb. espero que te sirva amigo. Lo más sencillo que te puedo recomendar es esto amigo.

Hasta la próxima!

10 comentarios:

  1. Espero comentarios amigos! Un abrazo.

    ResponderEliminar
  2. Lo probe y nop jeje, bueno si funciona tal cual es, y muy bien, pero mira este es mi codigo

    Bueno el que me gustaria que cambiara es el primer width: 63px, que al pasar el mouse se haga de 125 para asi mostrar totalmente los barners, ya trate como lo pusiste, de hecho lo modifique para cambiar de imagen como si fuese boton, bueno nose como aplicarlo, trate de muchas amneras y nomas no =S

    ResponderEliminar
  3. No em deja mandarte elcodigo te lo mando por email, muchas gracias!! y pues en efecto si funciona muy bien.

    ResponderEliminar
  4. Amigo, el código lo tienes que introducir en; cuando creas un post; "Edicion en HTML"; pegas el código y lo modificas tal cual te lo he explicado en el tutorial.

    Los numeros del código son el tamaño de la imagen, antes y después de pasar el ratón.

    Y ahí donde pone "URL de la imagen", ahí va la direcció de la imagen subida.

    Entonces cambiad de modo "Edición en HTML" a Modo normal y verás que funciona el código.


    Espero haberte ayudado amigo!

    ResponderEliminar
  5. Hola veo que te esfuerza mucho en tu blog, ademas de que tus post son muy utiles, te invito a que participes en nuestro 2do concurso de blogger 2011, podras ganar hosting y dominio gratis por 5 años, aqui las baseS: https://okhosting.com/blog/post/Concurso-de-Bloggers-OKHOSTING-2011.aspx

    ResponderEliminar
  6. Muchas gracias, lo tomaré en cuenta y sin duda; habiendo posibilidad me uniré al concurso. Gracias por tomar en cuenta mi trabajo y esfuerzo.

    Un saludo!

    ResponderEliminar
  7. Si funciona para maximizar las imagenes usen Firefox para que funcione

    ResponderEliminar
  8. Siento decirte que es bueno tu blog
    pero mejor mi hallazgo
    thx

    ResponderEliminar
  9. Heliogábalo Santos, agradezco tu original comentario, un abrazo!

    ResponderEliminar