Mapas de imágenes

Nota: Esta lección se escribió para la versión 9.3 en el año 2006. No sé si en versiones posteriores la edición de mapas de imagen habrá mejorado, pero hace varios años que ya no he dado este tema en clase.

En esta página se tratan los siguientes temas:

• 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.

Problemas con los mapas de imagen

Aunque la versión Amaya 9.3 ha mejorado el manejo de los mapas de imagen con respecto a versiones anteriores, Amaya todavía tiene algunos problemas en la creación de mapas de imagen:

• las áreas poligonales no se pueden modificar una vez creadas (este problema ya existía en versiones anteriores)
• las áreas circulares y rectángulares se crean arriba a la izquierda (este problema se resuelve desplazando las áreas a la posición correcta)
• al crear áreas a veces se desplazan las imágenes (este problema se resuelve recargando la página)

Pero los mapas de imagen no sólo dan problemas en Amaya, sino también en Firefox o en Internet Explorer:

• En Firefox, si el elemento map no tiene el atributo name, el mapa no funciona, aunque el documento sea válido. En un documento XHTML 1.0 se puede poner, pero el problema es que en XHTML 1.1 no existe el atributo name. Este problema ocurre si el servidor no sirve la página como application/xhtml+xml (algo bastante habitual).
• En Internet Explorer si el atributo usemap es usemap="map" (válido), el mapa no funciona , si el atributo es usemap="#map" (no válido) entonces sí que funciona.

Por tanto, para poder hacer que los mapas de imagen generados por Amaya funcionen tanto en Firefox como en Internet Explorer, es necesario:

• que el documento sea XHTML 1.0
• añadir en el código fuente la almohadilla # en el atributo usemap de la etiqueta img.

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 página trataremos únicamente los mapas de imagen de cliente, los más utilizados.

Volver al principio de la página

Configurar Amaya

Para que facilitar la creación y manipulación de mapas de imágenes, conviene activar la opción de menú Ver > Áreas de mapas. Al activar esta opción, Amaya mostrará el contorno de las áreas de mapas de imágenes.

Volver al principio de la página

Crear un mapa de imagen

Para crear un mapa de imagen, previamente hay 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:

• Si se va a crear un nuevo mapa de imagen, hay que seleccionar la imagen

  Si se va a crear una nueva área en un mapa de imagen ya existente, hay que seleccionar una de las áreas ya existentes,

• en el menú Insertar > Área de mapa seleccionar la forma del área que se desee crear (círculo, polígono o rectángulo). Inmediatamente, el cursor cambiará de forma y se convertirá en una cruz ( ).
• dibujar el área sobre la imagen:
  • rectángulo

    hay que hacer clic en el lugar en el que se quiera situar la esquina superior izquierda del rectángulo y arrastrar el ratón hasta la esquina superior derecha. Hay que soltar el ratón para crear el rectángulo.

  • círculo

    hay que dibujar 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

    hay que hacer clic en los lugares donde se encuentren los vértices del polígono, salvo en el último vértice en el que hay 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 introducir el texto alternativo (este texto es obligatorio) y hacer clic en Confirmar.

  

  El contenido del atributo alt se muestra en Internet Explorer cuando se sitúa el ratón sobre el área. En el caso de Firefox, se muestra el contenido del atributo title.

• al confirmar el texto alternativo, se abrirá una caja de texto para introducir el destino del enlace.

  

  Esta caja 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.

Volver al principio de la página

Modificar un área de un mapa de imagen

Para eliminar un área, hay que seleccionar el área con el ratón y pulsar la tecla Borrar o Suprimir o emplear el menú Editar > Borrar.

Para desplazar un área, hay que mantener pulsada la tecla Control y arrastrar el área a la nueva posición.

Para desplazar un vértice de un polígono, hay que mantener pulsada la tecla Control y arrastra el vértice a su nueva posición.

Para modificar el tamaño de un área, hay que mantener pulsada la tecla Control y arrastrar con el botón derecho el área hasta el nuevo tamaño.

Amaya 9.3 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, hay que seleccionar el área con el ratón y mediante el menú Enlaces > Crear o cambiar enlace (o mediante el botón ) seleccionar el nuevo destino del área.

Para modificar el texto alternativo de un área, hay que seleccionar el área y cambiar en la ventana de atributos el atributo alt.

Para incluir o modificar el atributo title en un área (para que Firefox muestre un "tip" cuando el ratón se sitúa sobre el área), hay que seleccionar el área y cambiar en la ventana de atributos el atributo title.

Volver al principio de la página

Áreas superpuestas

En Amaya 9.3, 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.

En el código fuente, las etiquetas de area aparecen en el orden en que se han creado. Tanto en Firefox como en Internet Explorer, en el caso de que haya áreas que se superpongan, el área que se activa es la primera de la lista (en Amaya es la última).

Para cambiar el área que se activa cuando hay áreas superpuestas, hay que editar el código fuente de la página y reordenar las etiquetas area.

Volver al principio de la página