TjpZoom - Zoom a imagen mediante el mouse para página web en Javascript.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Si estás buscando una manera de poder realizar zoom de imágenes y gráficos, este script es una excelente opción.

TjpZoom es un ejemplo en javascript que fácilmente te permite, mediante el uso del mouse, poder ampliar y reducir gráficos. Funciona con la mayoría de los navegadores webs actuales y es muy fácil de implementar.

A continuación se muestra mas información sobre el ejemplo.

Mas información sobre el programa.

Indice - Contenido.

  1. Realizar zoom a una imagen de una página web
  2. Instalar el script en la página web
  3. Realizar otras configuraciones.

 

1 - Realizar zoom a una imagen de una página web

Para ampliar o reducir el tamaño de la imagen, podemos mover el mouse sobre el gráfico, y presionando el botón izquierdo y moviendo el ratón hacia arriba o hacia abajo, se visualizará el zoom dentro de un recuadro o ventana.

Las propiedades de esta ventana también se pueden configurar. ( Ver detalles al final de la página )

2 - ¿ Cómo se instala el script en la página web?

Es muy simple. Solo deberás añadir en la sección de HEAD de la página, la referencia al archivo Javascript ( tjpzoom.js ).

Por último, con llamar en el evento OnMouseOver de la imagen, a la función TJPZoom, ya se podrá realizar el zoom a dicho gráfico.

Por ejemplo:

3 - Realizar otras configuraciones.

Si quieres desactivar el zoom sobre la imagen, puedes ver en el ejemplo en el archivo de descarga, una página que implementa un botón para desactivar y activar el zoom cuando lo necesitemos.

Este ejemplo básicamente lo que hace es, asignar un ID al gráfico, y luego ejecutar una función javascript en el evento onClick del mismo. El archivo de demostración es onoff.html

Así también, en la carpeta encontrarás otros archivos javascript para configuraciones varias del zoom: Borde del recuadro, el tamaño mínimo y máximo de la ventana etc ..


Requerimientos de instalación y uso.

Lenguajes Javascript.

Compatible con los siguientes navegadores web:

  • Internet Explorer 6, 7, 8 y 9.
  • FireFox 2 o superior.
  • Google Chrome
  • Konqueror 3.5.6
  • Safari.

Videos tutoriales.

Indice de videos.

Este video es una introducción y también una guía para poder instalar paso a paso el script que te permitirá realizar Zoom de fotos e imágenes en tu sitio web.

En el tutorial se muestran los siguientes temas:

  • Primero una vista previa del script en funcionamiento.
  • En la segunda parte, como crear una página HTML desde 0 con un editor de páginas. En el ejemplo se utiliza el programa Dreamweaver. Luego, añadir la imagen a la cual realizar el Zoom, y por último, incluir las referencias a los archivos javascript en el código fuente de la página web ( en la sección HEAD ).
  • En el tercer y último paso, como configurar otras opciones editando el archivo tjpzoom_config_default.js. Este fichero de configuración, permite especificar el factor de zoom, y el tamaño de la ventana donde se muestra la ampliación.

Duración del video: 9 minutos.

( Ver este video en alta definición - HD - Desde YouTube )

 

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://valid.tjp.hu/tjpzoom
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:
30 ABR 2011


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: