Mapas de Imágenes.

Hemos visto cómo poner un hipervínculo en una imagen, pero veamos cómo hacer algo más sofisticado como es un mapa de imagen.  Un mapa de imagen es un conjunto de zonas activas sobre una imagen. Una zona activa es una región en la que situamos un hipervínculo. Para aclarar mejor el concepto de mapa de imagen, un mapa de imagen es una imagen que dependiendo donde se haga clic sobre la imagen accede a un enlace o a otro.

¿Cómo funcionan?

Inicialmente, cuando creábamos un hipervínculo en una imagen, al hacer clic en cualquier parte de la imagen, activábamos el hipervínculo. En cambio, si creamos un mapa de imagen, podemos tener varios hipervínculos en una misma imagen. Cada hipervínculo está situado en una zona de imagen. Como en un hipervínculo normal, el ratón cambiará su forma a una manita al situarlo sobre una zona activa.

Para crear las zonas activas tenemos que activar la barra Imágenes.

Las herramientas de las que disponemos son:

Seleccionar zona / cambiar tamaño / mover zona activa.

La flechita nos permite hacer multitud de cosas. Cuando un gráfico contiene zonas activas, hemos de pinchar en él para verlas. Si queremos cambiar el tamaño de una forma activa, primero la seleccionamos haciendo clic en ella, y después cambiamos su tamaño haciendo clic en los cuadraditos que han aparecido.

Además, podemos desplazar una zona activa por el gráfico para situarla en otra posición. Para ello pulsamos en el gráfico para ver las zonas activas, pulsamos en la que queremos mover y, sin soltar, arrastramos el ratón. La zona activa se moverá. No es posible 'sacar' una zona activa de un gráfico, ni dejarla medio salida.

Para borrar una zona activa, la seleccionamos y pulsamos en la tecla suprimir Supr.

Insertar zona activa rectangular / circular / poligonal .

Estos tres botones nos permiten crear zonas activas. Cada uno crea la zona con una forma distinta. El primero nos permite crear cuadrados o rectángulos. El segundo círculos. El último polígonos.

Para crear una zona activa, pulsamos en el botón cuya forma queramos crear, y pinchamos en el gráfico. El ratón cambiará su forma a un pequeño lápiz. Sin soltar el botón izquierdo del ratón, arrastramos. Se creará una zona activa, cuyo tamaño y forma dependerá de cómo arrastremos el ratón. La zona activa rodea sus límites con una línea negra gruesa (o blanca si el fondo de la imagen es negro). Cuando estemos satisfechos, soltaremos el botón izquierdo del ratón. Automáticamente, aparecerá el cuadro de diálogo Insertar hipervínculo, para que vinculemos la zona activa.

Veamos un ejemplo. Tenemos una empresa ficticia, Información profesional, con un gráfico que queremos que haga de menú, llevando a tres partes distintas de la web. El gráfico tendrá tres zonas activas, cada una con un hipervínculo distinto. Este es el gráfico:

Vamos a construir el mapa de imagen.

La primera zona activa será rectangular. Pulsamos en el botón de la barra de imágenes Zona activa rectangular y creamos la zona activa sobre la zona de la imagen que tiene el fondo amarillo. Esta zona nos enlazará con otra página llamada quienes.htm.

Creando el rectángulo.

Después de crear la zona, aparecerá el cuadro de diálogo Insertar hipervínculo que ya conocemos. Escribimos en el campo Dirección: el vínculo, en este ejemplo, quienes.htm

Ahora creamos una zona activa circular. Pulsamos en el botón de la barra de imágenes Zona activa circular y creamos la zona activa sobre la zona de la imagen que tiene el fondo rojo. Esta zona nos enlazará con otra página llamada empresa.htm.

Podemos ver como el círculo no encaja exactamente con la zona.

Para que encaje una zona activa con un dibujo, sobretodo si este es irregular, usamos un polígono.

Pulsamos en el botón de la barra de imágenes Zona activa en forma de poligono y creamos la zona activa sobre la zona de la imagen que tiene el fondo verde. Para ello vamos haciendo clics alrededor de la imagen. El polígono va construyéndose a medida que hacemos clic: con cada clic un nodo y una línea que conecta el nodo actual con el anterior. Para cerrarlo, hacemos clic en el primer nodo, es decir debemos cerrar el dibujo del primer nodo con el último..

Podemos desplazar los nodos para cambiar la forma con la herramienta flecha. Esta zona nos enlazará con otra página llamada contactar.htm.

Resaltar zonas activas.

Finalmente, si no vemos con claridad las zonas activas, pulsando en el botón Resaltar zonas activas de la barra Imágenes, desaparece la imagen y quedan las zonas. Si volvemos a pulsar el botón aparece la imagen de nuevo.