Insertar imágenes - Tutoriales Diseño Gráfico

Breaking

𝔸𝕡𝕣𝕖𝕟𝕕𝕖 𝕔𝕠𝕟 𝕋𝕦𝕥𝕠𝕣𝕚𝕒𝕝𝕖𝕤

Insertar imágenes

 Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes.

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>:

Imagen alineada a la izquierda (por defecto)
<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
Imagen con un texto alternativo
Para verlo tienes de deshabilitar la opción de cargar imágenes de tu visualizador.
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
AQUI VA UNA IMAGEN
Imagen alineada a la izquierda.Texto alineado arriba
<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
Imagen alineada a la izquierda.Texto alineado abajo
<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
Imagen alineada a la izquierda.Texto alineado al centro
<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
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen
<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
Imagen alineada a la izquierda.Texto envolviendo la imagen
<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
texto texto texto texto texto texto texto
Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen

<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
Imagen redimensionada a más.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=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.

Imagen redimensionada a menos.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=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

Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la imagen
<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 texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios verticales y horizontales vacíos forzados.
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 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 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 texto texto texto texto texto texto texto texto texto texto texto texto
Usar una imagen como punto de montaje de un link
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 >
Ahora que ya sabes cómo manejar las imágenes, veamos algunos efectos especiales algo más complicados.

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,46
Este 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.

Pero, una vez más, Netscape ha propuesto una solución mucho más simple: que sea el propio visualizador quien haga las veces de programa conversor. En efecto, un recurso tan bueno como los mapas, no debe depender de tener tu máquina en red y de que haya un servidor http que te atienda. Además, eso resta portabilidad a los documentos locales y a los trabajos personales en disquete. Para ello ha implementado el elemento MAP que acompañará a IMG.

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


Read more