Imágenes II

Contenidos:

Imágenes I


Imágenes y enlaces

Los enlaces hipertexto pueden ser también definidos sobre imágenes de tal forma que al picar con el ratón sobre algún punto de la superficie de éstas, se pase al documento correspondiente. Esto suele ser utilizado sobre todo para introducir botones de navegación en las páginas HTML.

Ejemplos:

<A HREF="forms.htm"><IMG SRC="images/boton1.gif"></A>
<A HREF="#inicio"><IMG SRC="images/boton2.gif"></A>
<A HREF="simbolos.htm"><IMG SRC="images/boton3.gif"></A>
Una imagen que actúa de hiperenlace se distingue mediante un borde de color alrededor de ésta, como puede observarse en el ejemplo anterior.

Si en un enlace se indica la dirección de una imagen dicha imagen no será cargada junto con la página sino que será cargada sólo en el caso de que dicho enlace sea activado.

Ejemplo:

<A HREF="images/new.gif"> Enlace a una imagen </A>
Enlace a una imagen
Inicio

Imágenes mapeadas

Al utilizar las imágenes como hiperenlaces, se podrán definir distintas conexiones en función del lugar donde se pulse, dentro de la imagen, obteniendo lo que se denomina imágenes mapeadas.

A continuación se detallarán dos métodos para definir una imagen mapeada. El principio de funcionamiento será diferente para cada uno de ellos:


Realización de una imagen activable con HTML 2:

Se seguirán una serie de pasos:

  1. Definir la imagen con el tamaño deseado. Es conveniente probar dicha imagen en diferentes resoluciones de pantalla (PC, Mac, terminales X) a fin de predeterminar con seguridad el tamaño óptimo de ésta, ya que el trabajo que viene a continuación es muy tedioso como para tener que volver a empezar.

  2. Hacer una lista de coordenadas, zona por zona, de las superficies activables. Estas zonas activables podrán tomar las formas de: rectángulo, círculo o polígono.

    El sistema se coordenadas de la imagen tendrá su origen en la parte superior izquierda de ésta. Habrá que crear un fichero en el que cada línea definirá una forma geométrica para la zona activable y su URL asociado. La sintáxis será la siguiente:

       forma dir_URL  X1,Y1 X2,Y2 ... 
    El número de puntos (expresados en píxels) dependerá de la forma de la zona, la cual se indicará mediante una de las siguientes palabras clave:
    • RECT: rectángulo definido por dos puntos: el extremo superior izquierdo y el extremo inferior derecho.
    • CIRCLE: círculo definido por dos puntos: el centro y un punto cualquiera situado sobre la circunferencia.
    • POLY: polígono definido por un máximo de 100 vectores: se da la dirección de cada extremo del vector.

    Ejemplo:

       default /home_page.html
       rect http://www.aramis.fr 5,5 21,14
       poly http://www.porthos.fr 38,6 50,6 48,18 45,15 40,21 35,24
       circle http://www.athos.fr 52,32 45,32
    

    Este fichero se guardará por ejemplo bajo el nombre de ej_mapa.map en un directorio del servidor cuyo nombre podría ser /map. Dicho fichero no tiene nada en común con un fichero HTML. A continuación se detallará cómo se va a utilizar para hacer una imagen activable.

    La posibilidad de gestionar imágenes activables no se debe a la funcionalidad intrínseca del servidor Web. Por tanto para poder efectuar esta operación hay que ejecutar un programa especial, imagemap. Este programa se encuentra disponible de modo estándar en la distribución del demonio HTTPD proporcionado por NCSA y debe ser instalado por el administrador en la zona CGI del servidor.

  3. Hay que declarar el fichero ej_mapa.map en un fichero del servidor, imagemap.conf, situado en la raíz del servidor. Este fichero es conocido por el programa imagemap y contendrá línea por línea, con un nombre simbólico, la dirección de todos los ficheros que definen las imágenes activables del servidor. Se edita pues el fichero imagemap.conf y se le añade una línea donde se declara nuestro fichero atribuyéndole un nombre simbólico y dando su camino de acceso.

    Extracto del fichero imagemap.conf:

       .....
       .....
       ej_mapa: /map/ej_map.map
    

  4. La operación siguiente consiste en proponer el mapa activable en la página HTML. La sintáxis general será la siguiente:
       <A HREF=cgi-bin/imagemap/nombre_simbólico>
          <IMG SRC="URL_imagen.gif" ISMAP>
       </A>
    

    El atributo ISMAP indica al browser que se encuentra ante un mapa activable y que será necesario que transmita las coordenadas del punto activado.

    Lo que, aplicado a nuestro ejemplo, nos da:

       <A HREF=cgi-bin/imagemap/ej_mapa.map>
          <IMG SRC="mmm.gif" ISMAP>
       </A>
    

  5. La última operación consiste en probar la imagen haciendo clic sobre cada una de las zonas predefinidas, incluyendo la zona predeterminada para verificar el correcto funcionamiento del conjunto.

Realización de una imagen activable con HTML 3:

La realización de un mapa activable es mucho más sencilla con este nivel de HTML, porque todo está descrito en el mismo fichero y ya no se necesita un programa servidor exterior (cgi-bin).

Actualmente pocos browsers son capaces de utilizar mapas activables de este tipo.
Netscape 2.0 en versión beta permite esta funcionalidad.

Aquí la imagen se define con la marca <IMG> a la que se asocia el atributo USEMAP. Este atributo permite referenciar un "subprograma HTML" que describe las zonas activables y sus URL asociados.

La sintáxis de llamada será pues:

   <IMG SRC="imagen.gif" USEMAP:"nombre_del_mapa">

El elemento <MAP> define el principio y fin del bloque de definición de zonas activables. Estas zonas se describirán mediante el elemento <AREA>. La sintaxis general de definición de mapas será por tanto:

   <MAP NAME="nombre_del_mapa">
     <AREA SHAPE="figura" HREF="url1" COORD="x0,y0,x1,y1,...">
     <AREA SHAPE="figura" HREF="url2" COORD="x00,y00,x11,y11,...">
   </MAP>.

Figura puede tomar los valores RECT, POLY o CIRCL. El sistema de coordenadas estará también situado en el extremo superior izquierdo de la imagen.

Es posible reemplazar el atributo HREF por NOHREF para una zona neutra de la imagen.

Ejemplo:

   <MAP NAME="mapa1">
     <AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
     <AREA SHAPE="rect" COORDS="76,1,136,46" HREF="imagenes.htm">
   </MAP>

   <IMG SRC="sugeren.gif" USEMAP="#mapa1">

El atributo USEMAP indica qué mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. En el ejemplo mapa1, va precedido del símbolo #. Esto se debe a que el mapa se encuentra definido en la misma página que la definición de la imagen. Si el mapa estuviese definido en otro documento se colocaría el nombre del fichero en cuestión antes del símbolo #, como se hace con el atributo HREF.

Inicio

Imágenes I
Indice

Facultad de Informática de la Universidad de Las Palmas de Gran Canaria