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 HEIGT 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 GIF o JPG. Estos formatos son interpretados directamente por el visualizador. Se puede usar cualquier otro formato como el MPG (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.
Algunos visualizadores no son capaces de tratar imágenes, o aunque el visulizador sí pueda, tal vez tu máquina tenga muy poca memoria o una tarjeta de vídeo floja. Entonces 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, soporta un link.
Veamos ejemplos del uso de <IMG>:
<IMG SRC="sugeren.gif">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
<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto texto exto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto texto exto texto texto texto texto texto
<IMG SRC="sugeren.gif" ALIGN=LEFT> 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
<IMG SRC="sugeren.gif" ALIGN=RIGHT> 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 HEIGTH=92 > 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 HEIGTH=20 > 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
<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 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 <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 abajo del visualizador (la que hay junto a una llave) 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 (circle) 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 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 que hay en la parte baja 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 circle 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