HTMLpointHTMLpoint HTMLpoint.com


 Galería de imágenes 1/2



HTML es un sistema de contraseña relativamente simple e intuitivo. La gran mayoría de los webdesigner se han improvisado como tales a través de cursos más o menos eficaces de autoaprendizaje. Es posible, por tanto, superar las dificultades técnicas ligadas a la publicación en Web con HTML. La verdadera dificultad, y contextualmente la verdadera habilidad del creador al trabajar en el problema, está en el equilibrio entre elementos gráficos y peso en Kb de la página. En otras palabras, es prioritario hacer atractivo un documento con imágenes y elementos multimedia, manteniéndolo al mismo tiempo tan ligero como sea posible para una navegación rápida y sin largas esperas. No es éste el lugar para profundizar en los temas que se refieren a la comprensión y optimización de las imágenes GIF y JPG, punto esencial de esta cuestión. Este artículo se conecta con este discurso explicando cómo puede Javascript ayudar a los creadores cuando éstos tienen que gestionar muchas imágenes en un documento concreto. Para facilitar la comprensión de este ejemplo, imaginemos que se quiere crear un pequeño archivo de imágenes de las portadas de los últimos números de HTMLpoint. La solución más evidente es servirse de los instrumentos canónicos de HTML, pero esto supone dos tipos de problemas:

  1. incluyendo en la página un gran número de imágenes, ésta empleará mucho tiempo para terminar la carga;
  2. incluir muchas imágenes una sobre la otra crea documentos muy largos y no es bonito gráficamente
Javascript es la solución a estos problemas. El ejemplo que sigue muestra cómo crear un visualizador de imágenes (que muestra una a la vez), gestionado por un menú.

El código de este script es sencillo y se escribe en el documento en dos puntos distintos.

Antes que nada, hay que actuar en el encabezamiento del documento, es decir entre las marcas <HEAD>:

Este código coloca la función "muestra imagen", que viene invocada sucesivamente dentro del documento, en particular en el módulo HTML que hace de menú al ejemplo. El array "images" se refiere al origen de la primera imagen del documento, por lo que cuando se cambia selección, cambia el origen. "galería" es el nombre dado al form, e "imagen" a la opción seleccionada.

Es importante que estas referencias no se aparten de las escritas en el form que completa el ejemplo
Muestra el ejemplo práctico

Se trata de un form que en parte retoma las características de estos instrumentos de HTML y en parte invoca funciones Javascript programadas anteriormente.

El gestor de eventos "onChange" funciona con los campos <INPUT>, <TEXTAREA> y <SELECT> y ejecuta un script cuando uno de los campos se modifica.

Las imágenes se incluyen entre las marcas <option>, donde "value" es el nombre del archivo y lo que sigue es el nombre que hay que asignarle a la selección.

La primera opción tiene un nombre, pero no un archivo asociado, porque representa una suerte de título del menú. La segunda opción no tiene ni uno ni otro, en tanto que se deja como espacio entre el título y las opciones.

Programado y cerrado el form, hay que añadir el siguiente código:

<img src="dentro.jpg" name="dentro" width=218 height=300 border=0 alt="HTMLpoint"> Este código establece:

  1. el punto del documento donde se produce la visualización de las imágenes;
  2. la imagen visualizada por defecto cuando se abre el documento (entro.jpg);
  3. la anchura (width) y la altura (height) de la imagen;
  4. el texto alternado ("HTMLpoint") asociado a todas las imágenes;

  Vuelve a principio de página
1997-2000 - Gráfica, layout y guías son propiedad exclusiva de HTMLpoint s.r.l.