Ampliar imágenes al pasar con el mouse o hacer click

Sigo con otra entrada sobre efectos en imágenes.

Para ampliarla con un click y reducirla con dos click, de esta forma:



hay que usar este código, reemplazando lo necesario:




<img
src="URL DE LA IMAGEN"
width="ANCHO DE IMÁGEN REDUCIDA"
onclick="javascript:this.height=ALTO IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"
ondblclick="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/>



Para ampliarla al pasar el mouse:


Hay que usar este:



<img 
src="URL IMAGEN" 
width="ANCHO IMAGEN REDUCIDA"
onmouseover="javascript:this.height=ALTURA IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"
onmouseout="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/>

También puede combinarse con otros scripts de java como el anterior   y quedaría por ejemplo algo asi (tarda en cargar, la solución para que cargue mas rápido esta aca):


Cualquier duda pregunta que no hay drama, saludos.

Visto en:http://santyweb.blogspot.com/2008/08/ampliar-imgenes-con-mouse.html

Manuelito dijo...

bUEN BLOG!!!!!, con respectoa a la ampliacion de las imagenes, solo copio el codigo en el post, es posible hacer eso???

Uno mas del monton dijo...

gracias, si asi es cualquier inconveniente pregunta

Anónimo dijo...

ese efecto es muy bueno... ando buscando uno parecido a ese....que haga lo siguiente: al pasar el mouse por encima cambie la imagen que se esta mostrando por otra... se puede...?? lo he visto en otras web..... esperaré tu respuesta...

Uno mas del monton dijo...

si, fijate que ahi aclaré, en el ultimo ejemplo eso es lo que hago, pero si son imágenes grandes que tardan en bajarse el efecto no se aprecia, pasate por esta entrada ahi esta como hacer bien ese efecto:

http://cosasparaelblog.com.ar/2009/02/botones-con-imagenes-cambiar-imagen-al.html

chulo hasan dijo...

graciazzz sos un k-po la pude usar en una web para el gob :D mirala :P www.retrojodah.com.ar

Deja aqui tu comentario

Siguiente Anterior Ir a página principal

LinkWithin

Related Posts with Thumbnails

Blogger Template by Blogcrowds

 
ir arriba