Micaela 20 de Septiembre de 2008 a las 10.00
   Imprimir artículo
elWebmaster.com

Zoom sectorizado en im谩genes de alta resoluci贸n con Javascript


Zoom sectorizado en im谩genes de alta resoluci贸n con JavascriptA la hora de presentar en una web im谩genes muy grandes, de alta resoluci贸n, muchas veces uno no est谩 muy seguro de cu谩l es la mejor forma de hacerlo sin que las mismas pierdan calidad o desentonen en nuestro dise帽o y sin que sea necesario abrirlas en una ventana aparte. Una posible soluci贸n a nuestro problema es utilizar ShiftZoom.js

Este Script nos permite muy f谩cilmente presentar la imagen en un tama帽o reducido, y sin nunca modificar ese tama帽o, realizar un zoom sobre distintos sectores de la misma, pudiendo desplazarse por el 谩rea ampliada.

De esta forma presentamos la imagen en forma completa, dando la opci贸n al usuario de observarla m谩s detalladamente sin que deba cambiar de p谩gina ni se produzca un cambio en nuestra maquetaci贸n.

Su uso es muy sencillo, tan s贸lo debe bajarse el archivo Js (haz clic aqu铆) y luego se lo debe enlazar agregando el siguiente c贸digo:

<script type="text/javascript" src="shiftzoom.js"></script>
<scriptscript type="text/javascript">
shiftzoom.defaultCurpath='imagenes';
</script>

Por ejemplo:
<div><img onLoad"="shiftzoom.add(this);" width="400" height="200" src='imagen.jpg'></div>

Con s贸lo hacer esto ya estar谩 creada la imagen, que en el ejemplo se presentar谩 reducida a 400 por 200 px y nos permitir谩 ampliarla y ver secciones del mismo tama帽o.

Realmente vale la pena utilizarlo ya que genera un acabado sumamente profesional para presentar, por ejemplo, fotograf铆as o cuadros.

Fuente: Ajaxian


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. marco dice:

    Exelente scrip me sera de mucha ayuda para el proyecto web que estoy montando….Gracias por publicar estas utilidades web.

    Hasta pronto y gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesi贸n