5.9 - Imágenes Sensibles

Imágenes Sensibles

     Una de las características principales del lenguaje HTML es la posibilidad de crear imágenes sensibles o mapeadas, que son imágenes en las que se definen diversas zonas que activan distintos hiperenlaces, al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define. La imágen se dividirá en distintas áreas que definirán documentos a los que es posible acceder.

     Para crear una imagen sensible será necesaria la especificación de las distintas áreas de la imagen y los enlaces que activaran cada una de ellas. Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar algún programa. Existen programas que permiten la definición de las imágenes sensibles, en estos se presentará la imagen en pantalla y mediante un puntero se podrán ir indicando las distintas zonas. Estas zonas podrán ser: rectángulo, circulo, línea poligonal o un punto. A cada una de estas zonas le asignamos una URL que será la que se active cuando se pulse en esa zona determinada. Con este programa crearemos un fichero con la extensión .map que será el que defina el mapa de la imagen.

     El contenido normal de este tipo de ficheros serán líneas del estilo:

figura_geométrica URL coord1 coord2 ... coordn

     Donde figura_geométrica podrá ser una de:

     La URL del enlace podrá ser una local, que debe empezar desde el directorio raíz, no vale relativa, o bien indicar la URL completa.

     Las coordenadas serán pares x e y separados por comas.

     Hay que tener en cuenta que las figuras que definen las zonas no deben solaparse ya que un punto de las imágenes no puede activar dos enlaces. En caso que se solapen se utilizará la que estuviera definida en primer lugar en el fichero del mapa.

      Si se utiliza la directiva point, no tiene sentido definir la URL por defecto, default, ya que siempre el lugar donde se pulse estará más próximo a un punto. En otro caso siempre será necesario indicar la dirección por defecto, salvo que el mapeado cubra toda la imagen, ya que si no se define en caso de pulsar en un lugar sin mapear producirá un error.

     Existen navegadores, los más antiguos, y programas de indexación, los robots de busqueda más extendidos (lycos, excite, etc ...) que no pueden seguir los enlaces que se encuentran en una imagen sensible. Por tanto se recomienda incluir en formato texto en la parte baja de la imágen los enlaces que se activan con la imagen sensible. De esta forma los documentos enlazados se pueden activar de las dos maneras.

Ejemplo

ISMAP como referenciar la imágen sensible

     Una vez creado el fichero que mapeará la imagen solo queda referenciarlo en el documento HTML. Para ello debemos definir la imagen y el enlace que se efectuará. Existe dos formas:

<A HREF="http://www2.uca.es/cgi-bin/imagemap/camino_hasta- _el_mapa/fichero_mapa.map"><IMG SRC="camino_imagen_sensible.gif" ISMAP></A>

     En el primer caso la parte primera define el programa que trata la imagen sensible http://www2.uca.es/cgi-bin/imagemap, la segunda parte especifica el fichero que mapea la imagen /camino_hasta_el_mapa/fichero_mapa.map. Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible.

     En este caso no es necesario poner el camino al programa imagemap sino solo la referencia al fichero del mapa. El mismo gráfico se referencia así:

<A HREF="/camino_hasta_el_mapa/fichero_mapa.map"><IMG SRC="camino_imagen_sensible.gif" ISMAP></A>

     El atributo ISMAP en la imagen es importante al igual que la extensión .map del fichero que mapea la imagen.

     El segundo caso es más rápido ya que es el servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir, en lugar de llamar al programa imagemap para que lo trate. Dependiendo del servidor instalado usaremos uno u otro método, en nuestro caso usaremos el segundo.

Ejemplo

Imágenes sensibles definidas desde el cliente

     En el caso anterior la interpretación del mapa de la imagen sensible correspondía al servidor, por tanto cuando el usuario pulsa sobre una imágen sensible, las coordenadas se pasan al servidor y este se encarga de comprobar usando el fichero que mapeaba la imágen. Por tanto para activar un enlace haría falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa, lo cual hace la consulta un poco más lenta. Y además a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona.

     Para solucionar esto se introdujo la posibilidad de crear imágenes sensibles definidas desde el cliente, de esta forma es el cliente (su navegador de la WWW) el que interpreta la imágen sensible y puede mostrar los enlaces que se activan en cada zona y que zonas son sensibles y cuales no. En este caso no es necesario indicar el documento por defecto ya que solo se podrán activar las zonas útiles de la imágen.

     Existe una nueva etiqueta HTML que permite definir estas imágenes sensibles interpretadas desde el cliente, su formato es el siguiente:

<MAP NAME="nombre">

<AREA SHAPE=RECT COORDS="x11,y11,x12,y12" href="URL">
<AREA SHAPE=RECT COORDS="x21,y21,x22,y22" href="URL">
     ...
<AREA SHAPE=RECT COORDS="xn1,yn1,xn2,yn2" href="URL">

</MAP>

     Cada una de las líneas con la etiqueta AREA, definen una zona sensible. Actualmente solo es posible definir zonas sensibles delimitadas por rectángulos, no pudiendo definir otras. Con el atributo COORDS se definen las coordenadas de la zona sensible, estas serán la coordenada del primer vértice xi1, yi1 y la coordenada del vértice opuesto xi2, yi2. La etiqueta HREF indica la URL que se activa con esta zona sensible.

     La forma de referenciarlo es utilizando el atributo USEMAP, indicando el mapa a usar, cuando se defina la imágen la forma será:

<IMG SRC="..." USEMAP="#nombre" >

     Como nombre utilizaremos el nombre que se le dio al mapa su definición.

     Esta etiqueta solo es soportada por los navegadores más modernos, Internet Explorer de Microsoft y el Netscape 2.0, por tanto los navegadores antiguos no podrían interpretar este tipo de mapas, sin embargo es posible utilizar ambas formas de definición a la vez, permitiendo que el mapa sea interpretado por todos los navegadores la forma será:

<A HREF="mapa.map"><IMG SRC="..." ISMAP USEMAP="#nombre" ></A>

     De esta forma si el navegador entiende la etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente, en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor.

Ejemplo