Imágenes con Javascript y HTML
Los lenguajes HTML y Javascript ponen a disposición del creador de páginas web una gran cantidad de recursos para crear vistosos efectos. No se requieren grandes conocimientos de programación y con un poco de práctica enriquecer el diseño de un sitio web puede llegar a ser muy fácil y sencillo. Todo lo que se precisa es un editor de texto y una aplicación para manipular imágenes. Ésta no tiene que ser necesariamente compleja ya que la mayor parte de los efectos serán llevados a cabo dinámicamente mediante el código Javascript y el propio lenguaje HTML.
Las imágenes transparentes son uno de los recursos que se utilizan con mayor frecuencia en el desarrollo de sitios web. Permiten introducir espacios de tamaño determinado o, por ejemplo, crear sistemas de superposición de imágenes que dan lugar a efectos de HTML dinámico.
El formato GIF cuenta con una opción que permite seleccionar un color como transparente. Esto significa que se puede ver todo lo que se encuentra “detrás” de la imagen en aquellos píxeles de la misma que sean de ese color. Hablamos de una imagen transparente cuando todos los píxeles de una imagen son del color que se ha seleccionado como transparente.
Las versiones actuales de los dos navegadores principales del mercado, Netscape Communicator e Internet Explorer, cuentan con una característica que permite utilizar imágenes transparentes de tamaño reducido (tamaño en bytes que ocupa el fichero), lo que redunda sin duda alguna en beneficio de la carga de la página web. Las imágenes tienen una anchura y altura determinadas de manera natural. Sin embargo estos valores no tienen que coincidir necesariamente con los que se indican en los atributos WIDTH y HEIGHT de la etiqueta <IMG>. Así por ejemplo, una imagen 1 x 1 (1 píxel de anchura por 1 píxel de altura) puede aparecer en el código fuente de una página web de la siguiente forma:
<IMG SRC=“p.gif”
WIDTH=“10”
HEIGHT=“10”>
A la hora de visualizar la página, el navegador “estira” la imagen original hasta que ésta tenga en tamaño indicado por la etiqueta <IMG> (10 píxeles de anchura por 10 píxeles de altura en el ejemplo anterior).
Esta facultad resulta especialmente útil cuando se trabaja con imágenes transparentes. Las imágenes pueden ser “redimensionadas” en cualquier momento así que se utilizan imágenes que tengan menor tamaño posible (1 x 1) y con ello se consigue aliviar la carga final de la página HTML.
Para crear una imagen transparente se puede utilizar prácticamente cualquier editor de imágenes. Una de las aplicaciones shareware más populares y sencillas de manejar es Paint Shop Pro. La versión de evaluación puede ser descargada de manera gratuita desde www.jasc.com. Su instalación no reviste complicación alguna. Una vez que ésta ha concluido se puede empezar a trabajar con la aplicación.
El primer paso consiste en seleccionar la opción File > New del menú principal de la aplicación. En ese momento se abre una pequeña ventana donde se han de indicar los parámetros que caracterizan la imagen que se desea crear. Los valores que se deben introducir son los que siguen:
• Width (Anchura): 1
• Height (Altura): 1
• Background color (Color de fondo): White
• Image type (Número de colores de la imagen): 2 Colors (1 Bit)
Para el resto de los parámetros son válidos los valores que aparecen por defecto.
En ese instante se crea una imagen totalmente blanca de 1 píxel de anchura por 1 píxel de altura. Esta imagen sólo puede contener dos colores: blanco (0) y negro (1). Esto se hace de esta forma para que el tamaño en bytes final del fichero correspondiente sea el menor posible: si una imagen utiliza solamente dos colores se precisa 1 bit para diferenciarlos; si utiliza 16 colores, se precisan 4 bits; si utiliza 256, se precisan 8 bits; etc.
El siguiente paso consiste en seleccionar el color transparente. Inicialmente la imagen es totalmente blanca ya que así se ha indicado durante el proceso de creación (Background color: White). Por lo tanto el color transparente será el blanco y éste está representado por el valor numérico 0. Seleccionado la opción Color > Set Palette Transparency del menú principal se muestra la ventana que permite llevar a cabo esta tarea. Existen tres elecciones posibles:
• No transparency: no hay ningún color transparente. Es la elección por defecto.
• Set the transparency value to the current background color: el color transparente será aquel color que esté seleccionado como color de fondo.
• Set the transparency value to palette entry: el color transparente será aquel cuyo valor se indica.
Seleccionar el color blanco de la imagen como transparente es tan sencillo como introducir el valor 0 en la tercera de las opciones y hacer clic en el botón OK.
Finalmente, seleccionando la opción File > Save del menú principal se muestra una ventana que permite elegir el directorio donde se va a guardar el fichero correspondiente así como el formato de la imagen. Todos los formatos no admiten los colores transparentes. Por ello la imagen debe ser salvada con el formato GIF.
Espacios de un tamaño determinado
La primera de las aplicaciones prácticas de las imágenes transparentes es la creación de espacios de un tamaño determinado. El lenguaje HTML permite definir la anchura de muchos elementos si bien e
Las imágenes transparentes son uno de los recursos que se utilizan con mayor frecuencia en el desarrollo de sitios web. Permiten introducir espacios de tamaño determinado o, por ejemplo, crear sistemas de superposición de imágenes que dan lugar a efectos de HTML dinámico.
El formato GIF cuenta con una opción que permite seleccionar un color como transparente. Esto significa que se puede ver todo lo que se encuentra “detrás” de la imagen en aquellos píxeles de la misma que sean de ese color. Hablamos de una imagen transparente cuando todos los píxeles de una imagen son del color que se ha seleccionado como transparente.
Las versiones actuales de los dos navegadores principales del mercado, Netscape Communicator e Internet Explorer, cuentan con una característica que permite utilizar imágenes transparentes de tamaño reducido (tamaño en bytes que ocupa el fichero), lo que redunda sin duda alguna en beneficio de la carga de la página web. Las imágenes tienen una anchura y altura determinadas de manera natural. Sin embargo estos valores no tienen que coincidir necesariamente con los que se indican en los atributos WIDTH y HEIGHT de la etiqueta <IMG>. Así por ejemplo, una imagen 1 x 1 (1 píxel de anchura por 1 píxel de altura) puede aparecer en el código fuente de una página web de la siguiente forma:
<IMG SRC=“p.gif”
WIDTH=“10”
HEIGHT=“10”>
A la hora de visualizar la página, el navegador “estira” la imagen original hasta que ésta tenga en tamaño indicado por la etiqueta <IMG> (10 píxeles de anchura por 10 píxeles de altura en el ejemplo anterior).
Esta facultad resulta especialmente útil cuando se trabaja con imágenes transparentes. Las imágenes pueden ser “redimensionadas” en cualquier momento así que se utilizan imágenes que tengan menor tamaño posible (1 x 1) y con ello se consigue aliviar la carga final de la página HTML.
Para crear una imagen transparente se puede utilizar prácticamente cualquier editor de imágenes. Una de las aplicaciones shareware más populares y sencillas de manejar es Paint Shop Pro. La versión de evaluación puede ser descargada de manera gratuita desde www.jasc.com. Su instalación no reviste complicación alguna. Una vez que ésta ha concluido se puede empezar a trabajar con la aplicación.
El primer paso consiste en seleccionar la opción File > New del menú principal de la aplicación. En ese momento se abre una pequeña ventana donde se han de indicar los parámetros que caracterizan la imagen que se desea crear. Los valores que se deben introducir son los que siguen:
• Width (Anchura): 1
• Height (Altura): 1
• Background color (Color de fondo): White
• Image type (Número de colores de la imagen): 2 Colors (1 Bit)
Para el resto de los parámetros son válidos los valores que aparecen por defecto.
En ese instante se crea una imagen totalmente blanca de 1 píxel de anchura por 1 píxel de altura. Esta imagen sólo puede contener dos colores: blanco (0) y negro (1). Esto se hace de esta forma para que el tamaño en bytes final del fichero correspondiente sea el menor posible: si una imagen utiliza solamente dos colores se precisa 1 bit para diferenciarlos; si utiliza 16 colores, se precisan 4 bits; si utiliza 256, se precisan 8 bits; etc.
El siguiente paso consiste en seleccionar el color transparente. Inicialmente la imagen es totalmente blanca ya que así se ha indicado durante el proceso de creación (Background color: White). Por lo tanto el color transparente será el blanco y éste está representado por el valor numérico 0. Seleccionado la opción Color > Set Palette Transparency del menú principal se muestra la ventana que permite llevar a cabo esta tarea. Existen tres elecciones posibles:
• No transparency: no hay ningún color transparente. Es la elección por defecto.
• Set the transparency value to the current background color: el color transparente será aquel color que esté seleccionado como color de fondo.
• Set the transparency value to palette entry: el color transparente será aquel cuyo valor se indica.
Seleccionar el color blanco de la imagen como transparente es tan sencillo como introducir el valor 0 en la tercera de las opciones y hacer clic en el botón OK.
Finalmente, seleccionando la opción File > Save del menú principal se muestra una ventana que permite elegir el directorio donde se va a guardar el fichero correspondiente así como el formato de la imagen. Todos los formatos no admiten los colores transparentes. Por ello la imagen debe ser salvada con el formato GIF.
Espacios de un tamaño determinado
La primera de las aplicaciones prácticas de las imágenes transparentes es la creación de espacios de un tamaño determinado. El lenguaje HTML permite definir la anchura de muchos elementos si bien e
