Tratamiento de imágenes en Javascript

Te enseña a trabajar con imágenes en páginas web utilizando javascript para hacer efectos interesantes como rollovers.

Si te parece útil este manual ayúdanos compartiendo!! :)

1.- Introducción al tratamiento de imágenes en Javascript

Abordamos el acceso por JavaScript a las imágenes de una página web.

2.- El objeto Image - La matriz images

Explicamos los métodos para acceder a las propiedades de las imágenes.

3.- Propiedades del objeto Image

Describimos las propiedades más interesantes de este objeto con algunos ejemplos.

4.- Eventos para imágenes

Eventos comunes y no comunes aceptados por el objeto Image. Trucos para utilizar otros eventos no aceptados.

5.- El constructor de objetos Image

Describimos la forma de realizar una precarga de imágenes en la caché.

6.- Aplicación práctica - Rollover simple

Aprende paso a paso la forma de construir un rollover.

7.- Aplicación práctica - Rollover múltiple

Generalizamos nuestra función de rollover.

8.- Conclusiones

Finalizamos el tutorial dando un repaso a lo aprendido.

9.- Más sobre el tratamiento de imágenes en Javascript. La precarga

Introducción al segundo bloque del manual de tratamiento de imágenes con Javascript, que explica los objetivos a perseguir.

10.- La precarga de imágenes y el problema inicial

Describimos la motivación para hacer una precarga de imágenes y como el código que se suponía correcto no realiza la precarga correctamente.

11.- La explicación del fallo de la precarga de imágenes

Cuando se declara una imagen con Javascript, el navegador no detiene la carga de la página hasta que la imagen se ha terminado de cargar, sino que continúa la carga de la página y la imagen se descarga en un segundo plano.

12.- Las funciones estandar de precarga no valen

No sirve de nada usar funciones de precarga de imágenes como las habituales, que utilizan muchos de los editores gráficos o HTML del mercado.

13.- Función de precarga de imágenes en Javascipt que sí funciona

Podemos ver en este artículo la función de precarga de imágenes funcionando que precarga las imágenes correctamente.

14.- Cargador universal de imágenes

Se presenta un script para cargar imágenes a usar en la página.

15.- Distintas maneras de acceder a objetos Image Javascript

Distintas formas de obtener objetos Image de Javascript, a través de los elementos de la página, creándolo por nosotros mismos, etc.

16.- Precarga de imágenes con Mootools

Cómo realizar una precarga de un conjunto de imágenes y saber cuando todas han sido cargadas para realizar acciones con las imágenes.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

ESTOLIA

12/10/2010
CHIDO MANUAL
HOLA A TODOS QUISIERA QUE SUBIERAN MAS TUTORIALES DE JAVASCRIPT

buki

17/11/2010
nada
es aburrido esta pagina nunca la bolbere a ver

felipearturotorres

16/7/2013
Re Dimensionar Imagen en el Cliente y Subirlas al Servidor
es bastante claro lo que necesito, Re Dimensionar Imagen (foto) en la PC del Cliente mediante JavaScript y Subirlas al Servidor mediante classupload.php, no se si se puede, la idea es esta, cuando el usuario le dice que imagen subir, en este caso una foto de gran tamaño, el script copia dos imagenes mas chicas, una chiquita de 200x300 px y la otra de 640x480 px, las dos imagenes con un nombre dentro de una carpeta especifica... El tema es q el hosting no me deja subir imagenes de gran tamaño por eso debo reducirlas antes de subir, si saben por donde empezar esto, un manual, algo q m aclare un poco las cosas. agradecido felipearturo@hotmail.com

bam_

03/11/2014
javascript y jquery
mira este link http://www.linkbucks.com/AbUD2