Ejemplo de Imágen Sensible

Creación de una Imágen sensible

     En este apartado se explicará paso a paso, la creación de una imágen sensible. Para ello se utilizará el programa más básico para ello, mapedit, que se incluye en el Paquete Básico para la Creación de documentos HTML

     Al iniciar el programa seleccionaremos File -> Open/Create, y aparecerá la ventana que se muestra en el grafico adjunto,. En esta indicaremos el nombre del fichero que definirá el mapa de la imágen (Map File), que deberá tener la extensión .map, este será el fichero que habrá que transferir al servidor para referenciar la imágen sensible, lo llameremos ejemplo.map, en el apartado siguiente indicaremos el fichero GIF sobre el que se aplicará la imágen sensible (GIF Filename).

     Una vez cargada la imágen obtenemos la siguiente pantalla:

     En la que se muestra la imágen y sobre la que será posible ya definir las zonas sensibles de la imágen. en el menú Tools, estan expresadas todas las figuras que se pueden utilizar en la imágen, estas son: Polygon, para una línea poligonal, Circle, para definir un circulo y Rectangle, define un rectángulo.

     Para seleccionar cada una de las zonas del dibujo, seleccionaremos las figura correspondiente, en nuestro caso será Rectangle, una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botón izquierdo del ratón, fijando el primer vertice, luego arrastraremos hasta situarnos en el vertice opuesto, y ahí pulsaremos el botón derecho del ratón y obtendremos la siguiente ventana en la que nos será posible introducir al URL que activará esta zona.

     Definir una linea poligonal será similar, pero en este caso marcaremos con el botón izquierdo del ratón todos los puntos que forman el polígono y cuando lleguemos a su fin pulsaremos el botón derecho del ratón y podremos introducir la URL, la línea poligonal no será necesario terminarla, uniendose automáticamente el primer y último vertice.

     Una vez que definamos todas las zonas sensibles de la imágen, podemos utilizar la opción Test+Edit, que nos permirá probar y en su caso editar las distintas zonas de la imágen, obteniendo un muestra de la zona activa como se ve en la imágen:

     La opción para definir la URL por defecto, es decir, la que se activará cuando no se pulse sobre ninguna de las zonas definidas será File -> Edit Default URL.

     Una vez definidas todas las zonas de la imágen y la URL por defecto, podremos grabar el mapa de la imágen sensible con File -> Save.

     Obteniendo una fichero .map con el siguiente contenido:

default http://www2.uca.es/manual-html/prueba/noimagen.htm
rect http://www2.uca.es/manual-html/prueba/boton1.htm 8,10 61,63
rect http://www2.uca.es/manual-html/prueba/boton2.htm 62,10 134,36
rect http://www2.uca.es/manual-html/prueba/boton3.htm 62,36 134,64

Este fichero se transferirá al servidor y como se vió en con anterioridad existirán dos formas de referenciarlo:

Imágen sensible interpretada por el servidor
Inst.
HTML
<A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP> </A>
Resul
tado
Explica
ción
Como se ve pulsando en las distintas zonas de la imágen se activan los enlaces correspondientes, pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona.

Imágen sensible interpretada por el cliente
Inst.
HTML

<MAP NAME="ejemplo">
<AREA SHAPE=RECT COORDS="8,10,61,63" HREF="http://www2.uca.es/manual-html/prueba/boton1.htm" >
<AREA SHAPE=RECT COORDS="62,10,134,36" HREF="http://www2.uca.es/manual-html/prueba/boton2.htm" >
<AREA SHAPE=RECT COORDS="62,36,134,64 " HREF="http://www2.uca.es/manual-html/prueba/boton3.htm" >
</MAP>

<CENTER>
<A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP USEMAP="#ejemplo"> </A> <P>
[ <A HREF="http://www2.uca.es/manual-html/prueba/boton1.htm">boton 1 </A> |
<A HREF="http://www2.uca.es/manual-html/prueba/boton2.htm">boton 2 </A> |
<A HREF="http://www2.uca.es/manual-html/prueba/boton3.htm">boton 3 </A>]
</CENTER>

Resul
tado

[boton 1 | boton 2 | boton 3]

Explica
ción
En este caso la definición es más larga, pero si su navegador es el Internet Explorer o el Netscape 2.0, notará que este es capaz de identificar las zonas sensibles de la imágen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona.
Ademas es más rápida la identificación de que enlace se activa en cada zona.
En este caso no hay que definir URL por defecto ya que siempre se pulsará en una de las zonas definidas.
En la parte de abajo de la imágen se han incluido los enlaces que activa en formato texto para el caso de que el navegador no soporte imágenes sensibles (o sea un robot de busqueda).