# Mapas de imágenes

En esta lección aprenderás:

- qué son los mapas de imagen
- a configurar Amaya para facilitar la creación de mapas de imagen
- a crear un mapa de imagen
- a modificar un mapa de imagen
- qué ocurre cuando se definen áreas superpuestas.

## Qué son los mapas de imagen

Un mapa de imagen es una imagen en la que determinadas zonas (llamadas áreas) son enlaces. Pulsando sobre cualquiera de estas zonas, el navegador se desplaza al destino correspondiente.

Existen dos tipos de mapas de imágenes:

- mapas de imagen de cliente

  En estos mapas toda la información necesaria está contenida en la página y por tanto el navegador es capaz de realizar la acción.

- mapas de imágenes de servidor.

  En estos mapas, el navegador envía la posición del ratón al servidor y es el servidor el que evalúa y realiza la acción

En esta lección trataremos únicamente los mapas de imagen de cliente, los más utilizados.

## Configurar Amaya

Para que te sean más cómodas la creación y manipulación de mapas de imágenes, activa la opción de menú Vistas > Mostrar áreas de mapas. Al activar esta opción, Amaya mostrará el contorno de las áreas de mapas de imágenes.

## Crear un mapa de imagen

Para crear un mapa de imagen, previamente tienes que:

- insertar en la página la imagen que servirá de mapa
- en caso necesario, crear los destinos a los que apuntarán las áreas del mapa

A continuación:

- selecciona la imagen y en el menú XHTML > Área (area) selecciona la forma del área que desees crear (círculo, polígono o rectángulo). Inmediatamente, el cursor cambiará de forma y se convertirá en una cruz ().
- dibuja el área sobre la imagen:
  - rectángulo

    haz clic en el lugar en el que quieras situar la esquina superior izquierda del rectángulo y arrastra el ratón hasta la esquina superior derecha. Suelta el ratón para crear el rectángulo.

  - círculo

    dibuja un rectángulo como en el caso anterior y al soltar el ratón, Amaya crea un círculo en el interior del rectángulo (lo más arriba y a la izquierda posible).

  - polígono

    haz clic en los lugares donde se encuentren los vértices del polígono, salvo en el último vértice en el que tienes que hacer clic derecho. Amaya cerrará el polígono uniendo el último al primer punto.

- nada más crear el área, se abrirá una caja de texto para que introduzcas el texto alternativo (este texto es obligatorio). A continuación, pulsa Confirmar.

  Internet Explorer muestra este texto cuando sitúas el ratón sobre el área.

- nada más confirmar el texto alternativo, se abrirá una caja de texto para que introduzcas el destino del enlace.

  Esta caja te permite escribir directamente el URI del destino o, mediante el botón Buscar seleccionar el archivo de destino o, mediante el botón Clic seleccionar el destino en la misma página o en otra página web abierta en otra ventana de Amaya.

## Modificar un área de un mapa de imagen

Para eliminar un área, selecciona el área con el ratón y pulsa la tecla Borrar o Suprimir o emplea el menú Editar > Borrar.

Para desplazar un área, mantén pulsada la tecla Control y arrastra el área a la nueva posición.

Para modificar el tamaño de un área, mantén pulsada la tecla Control y arrastra con el botón derecho el área hasta el nuevo tamaño.

Para modificar la posición de un vértice de un polígono, mantén pulsad la tecla Control y arrastra el vértice a su nueva posición.

Amaya 8.1b no modifica los polígonos. Aunque la modificación se realiza en la pantalla, al guardar el archivo y recargarlo, se descubre que el cambio no se ha producido.

Para modificar el destino de un área, selecciona el área con el ratón y mediante el menú Enlaces > Crear o cambiar enlace (o mediante el botón ) selecciona el nuevo destino del área.

Para modificar el texto alternativo de un área, haz clic en el área, pulsa F2 y abre el menú Atributos > alt, en el que puedes editar el texto alternativo.

Para incluir o modificar el atributo title en un área (para que Mozilla muestre un "tip" cuando el ratón se sitúa sobre el área), haz clic en el área, pulsa F2 y abre el menú Atributos > title, en el que puedes editar el título.

## Áreas superpuestas

En Amaya 8.1b, cuando creas áreas superpuestas, el área que se activa en la zona común es la última que hayas creado. Pero los navegadores activan primero la primera que hayas creado.

Para poder modificar el área que se activa cuando hay áreas superpuestas, tendrás que editar el código fuente de la página. Cada área corresponde a una etiqueta <area>. Las etiquetas aparecen en el orden en que se han creado. La etiqueta del área que aparezca la primera en la lista es la que se activará en las zonas comunes que tenga con otras áreas.

Autor: Bartolomé Sintes Marco
Última modificación: 4 de noviembre de 2003