Ampliar una imagen o foto haciendo clic


Si queremos que en una entrada (un post, donde escribimos) aparezca una imagen en pequeño y que si hacemos clic sobre ella se haga grande y que si hacemos doble clic se haga pequeña, debemos hacer lo siguiente:

Cuando escribamos la entrada debemos poner el siguiente código en ella:


<img onclick="javascript:this.width=500;this.height=400" ondblclick="javascript:this.width=100;this.height=80" src="LINK de la imagen" width="100"/>



Los cambios que debemos hacer son:

LINK de la imagen: aquí va el link de nuestra imagen con su tamaño sin modificar.
width=500 y height=400: width (ancho) y height (alto) son las dimensiones que tendrá la imagen cuando hagamos clic sobre ella.
width=100 y height=80: son las dimensiones que tendrá la imagen cuando la reduzcamos, es decir, cuando hagamos doble clic sobre ella.


Ejemplo:



Haz clic para ampliar, 2 clics para reducir.

5 comentarios:

  1. Muy buen truco el que mencionas. Estoy buscando como hacer que las imagenes que cargo tengan etiquetas alt. La verdad no se como hacerlo. Si conoces el método por favor dejanoslo saber

    ResponderEliminar
  2. Hola Carlos para hacer un buen "alt" debes seguir esta estructura:

    <img src="http://www.LINKimagen.jpg" alt="Foto de mi ordenador" title="Foto1">.

    Title es el titulo que tendra la imagen cuando pases el cursor sobre ella.

    Saludos.

    ResponderEliminar
  3. Mil gracias por tu ayuda. Ya me está funcionando

    ResponderEliminar
  4. Gracias a ti, me alegro de haberte ayudado. Un saludo compañero.

    ResponderEliminar
  5. Estimado amigo

    Muchas gracias por permitirme participar. He seguido sus intrucciones para lograr la amplitud de un gadget pero infelizmente confieso que soy muy malo para esto, Ud podría indicarme por favor paso a paso? Coloqué el cógigo pero al hacer click me sale un anuncio indicándome que lo que estoy biscando no se encuantra en mi blog.

    Agradeciéndole de antemano,

    Juan

    ResponderEliminar