Unidad 9. Mapas de bits (VII)

9.4. Mapas de imagen

Crear un mapa de imagen es colocar enlaces sobre una imagen. Podemos dividir una imagen en varias áreas, y que al pulsar sobre cada una de ellas nos lleve a un enlace distinto. Por ejemplo, en la siguiente imagen, al pulsar sobre cada icono accedemos al curso de aulaClic correspondiente.

Aunque el resultado sea una única imagen, nosotros trabajaremos con distintos objetos, cada uno de los cuales puede tener un enlace. Para crear un enlace en un objeto, lo seleccionamos e introducimos la dirección en el campo URL del panel Atributos. En Mapa de imagen, seleccionamos si la zona del enlace será un rectángulo o un polígono. Illustrator ajustará lo que elijamos a la forma del objeto. De esta forma iremos indicando la dirección URL de los distintos objetos de nuestra imagen.

 

 

La información de qué zonas tienen enlace y a dónde apuntan no se guarda en el archivo de imagen. Estos datos se introducen con la etiqueta map en el html de una página web e Illustrator puede generar el código correspondiente. Para ello debemos grabar nuestro trabajo en Illustrator y luego seleccionar la opción de menú Archivo → Exportar → Guardar para Web (heredado) que usamos antes para exportar imágenes a web.

Esto abre la ventana Guardar para Web en donde podemos ajustar diversos parámetros de la imagen, como ya revisamos antes.

Arriba a la derecha indicamos en el desplegable de Ajuste preestablecido el formato de imagen que deseamos. En función del formato, tendremos diversos parámetros que podemos modificar.

Una vez que seleccionamos el tipo de imagen, modificamos los parámetros o incluso modificamos el tamaño final, podríamos pulsar el botón Guardar para indicar el nombre de la imagen y la carpeta donde vamos a grabarla, pero antes debemos pulsar el botón Previsualizar que está abajo a la izquierda de la ventana. Esto abrirá nuestro navegador web mostrando una vista previa de la imagen, pero, sobre todo, el código html que necesitamos añadir a nuestra página para que el mapa funcione, por lo que podemos copiarlo ahí. En este caso hemos utilizado direcciones URL ficticias.