Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT BORDER VSPACE HSPACE. Con las nuevas implementaciones que Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR.
Las imágenes utilizadas pueden estar en formato BMP (Bit Mapped Picture), GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group) o PNG (Portable Network Graphics). Estos formatos son interpretados directamente por el navegador. Las diferencias básicas entre ellos son varias:
BMP Estos gráficos soportan hasta 24 bits (16 millones de colores). Al aumentar su tamaño escalándolos, pierden calidad, es decir, se "pixelean". No acepta transparencia. Es el de mayor peso de archivo, debido a que no usa ninguna compresión.
GIF Solamente soporta 256 colores, por lo que no es adecuado para representar fotografías, pero sí es recomendado para iconos, logotipos o imágenes que tengan colores sólidos. Al aumentar su tamaño escalándolos, pierden calidad, es decir, se "pixelean". El archivo resultante es de poco peso por su algoritmo de compresión sin pérdidas. Acepta transparencia (canal alfa) únicamente en uno de los 256 colores de la paleta. Soporta animaciones.
PNG Es un formato pensado como una versión mejorada del formato GIF. En este caso, una misma imagen, sin pérdidas, ocuparía menos espacio que en formato GIF (>10%). Soporta color verdadero (hasta 64 bits con canal alfa). Las imágenes en PNG permiten transparencia variable de hasta 256 niveles. El canal alfa de PNG permite utilizar una mayor profundidad de bits para lograr efectos de semi-transparencia, como los objetos translúcidos. No soporta animaciones.
JPEG (más conocido como JPG) soporta hasta 16 millones de colores (24 bits) y comprime el tamaño del archivo final utilizando un algoritmo de compresión con pérdida. Es decir, que al convertir una imagen a este formato, una parte de la información es desechada (algo parecido a lo que ocurre con los ficheros mp3 de sonido). Los editores de gráficos permiten ajustar la cantidad de información original que se quiere perder. Es decir, que si se opta por la máxima compresión para obtener el menor peso posible, la imagen final puede ser muy deficiente. No permite transparencias ni animación.
Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vídeo), pero entonces el visualizador llamará a un programa auxiliar, que previamente le habrás definido, para que sea éste el que visualice el fichero. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no verás el texto junto con la imagen, y por tanto no podrás imprimir la página compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeños programas que permiten llamar a aplicaciones específicas ejecutándose como ventanas del navegador. Un ejemplo muy común son los ficheros .pdf.
Algunos navegadores no son capaces de tratar imágenes, o aunque el navegador sí pueda, tal vez el cliente esté navegando en modo solo texto, es decir, sin ver las imágenes, lo que permite moverse más rápido. Para estos casos podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecerá en lugar de la imagen. Esto es importante cuando una imagen, además de ser un elemento decorativo o informativo, soporta un link. El uso de ALT es recomendado por el W3C.
Veamos ejemplos del uso de <IMG>:
<IMG SRC="sugeren.gif">texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR> texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido:
<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE>
| texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto | |
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGHT=92 > texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto al doble: 272x92.
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGHT=20 > texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23
Esta forma de trabajar tiene como consecuencia, que si en el código del BODY no hay instrucciones sobre el espacio que hay que reservar en pantalla para cada imagen, cuando éstas lleguen en el último paso de la carga de la página, el texto ya estará compuesto, pero al no saber el tamaño de las imágenes, no se habrá reservado el espacio adecuado para insertarlas, por lo que todo el texto será desplazado hacia abajo, con la consiguiente pérdida del formato original de la página, ya que el navegador no va a recomponer el texto que ya estaba escrito.
<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texzto texto texto texto texto texto <IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto texto.
Como puedes ver, la imagen aparece rodeada de un marco de color como es habitual en los puntos de link (en el texto es el subrayado). Si quieres eliminar el marco, escribe:
.... IMG SRC="sugeren.gif" BORDER=0 >
Mapeado de una imagen para usarla como direccionador
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
Si mueves el ratón por encima de la imagen, verás que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos números que cambian según muevas el ratón. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha. Verás las cifras 1,1 y 136,46, respectivamente, que son las medidas en puntos que tiene el gráfico. Como ya habrás supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un menú direccionador, lo que necesitamos es que algún elemento convierta esas coordenadas en una dirección del estilo ya conocido: "http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos obtener un enorme número de direcciones, teóricamente tantas como pares de coordenadas tiene la imagen. En la práctica serán menos, ya que andar intentando atinar en el punto 11,32, por ejemplo, es un poco engorroso.
Existen multitud de programas llamados mapeadores que parten la imagen en imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos programas generan un fichero con todas las direcciones. Algo así:
rect http://miservidor.es/mifichero1.htm 12,35 rect http://miservidor.es/mifichero2.htm 90,42 rect http://miservidor.es/mifichero3.htm 112,46Este podría ser el aspecto del fichero del ejemplo, el llamado mimapa. El parámetro rect significa rectángulo, y nos indica que la imagen ha sido troceada en rectángulos y las coordenadas indican la esquina superior izquierda y la inferior derecha. También podría ser en círculos (circ) o polígonos (poly). Ahora veamos el resto de instrucciones del ejemplo:
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>La primera parte A HREF ya la conocemos, es un link. Después viene un directorio: cgi-bin. Este es un directorio especial que tienen los servidores http, donde se ejecutan los programas auxiliares del servidor, y al que normalmente sólo puede acceder el administrador del sistema. En ese directorio hay un fichero llamado imagemap (según el sistema puede ser otro) que es un programa que se encarga de leer tu fichero mimapa, capturar las coordenas que señale el puntero del ratón y servir la dirección que tiene asociada, con lo que acabamos obteniendo un link normal. Ya por último, aparece ISMAP que es el que convierte una simple imagen en una potente herramienta.
Sólo queda por decir que el fichero mimapa tiene que estar en otro directorio especial que tiene el servidor a estos efectos, y al que por supuesto, solo puede acceder el administrador del sitema.
Todo esto es suponiendo que el servidor está en una máquina UNIX. Si reside en tu propio PC con Windows o en un MAC (que los hay), tendrás que ver las instrucciones concretas del programa servidor. La forma de montar el mapa puede variar de un programa servidor a otro, pero la base de funcionamiento es siempre la misma.
Otra forma alternativa de conseguir que una imagen responda con ciertas acciones, es operar con los elementos de formularios. En el índice encontrarás información sobre un tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite ejecutar una acción.
Por ejemplo, en la siguiente imagen, la mitad izquierda nos envía a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratón horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, verás como cambia el nombre del link.
Se escribe así:
<MAP NAME="nombre1"> <AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm"> <AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm"> </MAP> <IMG SRC="sugeren.gif" USEMAP="#nombre1">Aunque se comprende a simple vista, analicémoslo:
En primer lugar tenemos el elemento MAP, que lo que está haciendo es definir un mapa de coordenadas. Va acompañado del atributo NAME que da nombre al mapa. Es necesario nombrarlo porque podría haber más de uno en la misma página, y evidentemente, sus nombres no deberán repetirse.
A continuación tenemos el atributo AREA que define las áreas de la imagen. El parámetro SHAPE="rect" indica la figura geométrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly.
El parámetro COORDS fácilmente se adivina que indica las coordenadas del área, en este caso vértice superior izquierdo e inferior derecho, respectivamente.
HREF ya sabemos lo que hace: indica un link con una página, pero esta vez no va acompañando al elemento <A>, digamos que es un atributo prestado. Hay un área por cada link definido. Si un área no queremos que tenga link se definirá con NOHREF.
IMG SRC también son conocidos: hacen que se visualice la imagen.
Y por fin, USEMAP nos dice qué mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fíjate en que nombre1, (el nombre del mapa) va precedido del símbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia está en la misma página que la instrucción IMG. Podría estar en otra, y en ese caso el símbolo tendría que estar después del nombre de la página. Por ejemplo: otrapagina.htm#nombre1
Como ya se ha dicho más arriba, hay tres figuras geométricas definibles para las áreas: rect, circle y poly. El rectángulo ya lo conocemos; consiste en parejas de coordenadas que indican los vértices superior izquierdo e inferior derecho respectivamente del área. Para el cículo (circ) son necesarios tres valores: x,y r donde x,y es el par de coordenas que indican el punto donde está el centro del cículo, y r es el radio del círculo medido en puntos. Para los polígonos (poly) se necesitan tantas parejas de coordenadas como vértices tenga el polígono, procurando que la última pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el gráfico como área de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada.