Unidad 14. Gráficos para la Web (III)

Mapas de Imágenes

En este tema aprenderemos a hacer mapas de imágenes. Los mapas de imagen no son más que gráficos sobre los cuales se han definido determinadas áreas sensibles al ratón. Estas áreas se pueden vincular con otras páginas y visitarlas al hacer clic sobre ellas.

En ImageReady crear mapas de imágenes es muy sencillo. Lo primero que deberás hacer será abrir el archivo sobre el que definirás el mapa. Puedes escoger un archivo del formato que desees pues los mapas de imagen no dependen del gráfico que incluyas sino que se tratan de una definición de áreas sobre la imagen que se establece mediante el código HTML que ImageReady creará cuando guardes el mapa.

Una vez abierta la imagen selecciona una de las herramientas de Mapa de imágenes.

Los mapas de imagen permiten áreas rectangulares, circulares y poligonales. Así que puedes combinar las herramientas para crear mapas bastante complejos.

Para hacer aparecer el menú contextual del grupo de herramientas deberás hacer clic sobre el icono en el Panel de Herramientas y dejarlo presionado (en Photoshop accedíamos a él haciendo clic derecho). Si pulsamos el triángulo al pie del menú, el grupo de herramientas se establecerá en una ventana flotante para que puedas trabajar con más comodidad.

Una vez hayas creado todas las áreas que tendrá el mapa, la ventana Contenido de Web tendrá un aspecto parecido a este:

Ahora podremos utilizar la herramienta de Selección de mapa de imágenes para seleccionar las áreas que hemos definido.

Esta sería la barra de Opciones de herramientas que veríamos:

Desde el botón o haciendo doble clic sobre la miniatura del área en la ventana Contenido de Web podemos acceder a las propiedades de la zona sensible.

Aquí podremos darle al área seleccionada un nombre que se visualizará en la ventana Contenido de Web para reconocerla mejor y rellenar los siguientes campos:

• URL: indica la página que se abrirá al hacer clic sobre el área seleccionada.

• Alt: configura el texto de ayuda que se mostrará al pasar el ratón sobre dicha área.

• Destino: este campo decide dónde se abrirá la página vinculada. Puede tomar los siguientes valores:

  • _blank: abre la página en una nueva ventana del navegador.

  • _self: abre la página en el mismo marco donde se está visualizando el mapa.

  • _parent: abre la página en el marco padre de dónde se está visualizando el mapa.

  • _top: abre la página en la misma ventana desde la que se está visualizando el mapa.

Podemos utilizar estos botones en la barra de opciones para decidir el nivel de importancia de las áreas sensibles.

Si dos áreas coinciden en un punto, la página vinculada será aquella del área que se encuentre por encima de la otra.

Con estos botones, entonces, podrás desplazarlas hacia arriba , hacia abajo , colocarlas encima de todas o debajo .

Una vez tengas el mapa acabado deberás proceder a guardarlo. Utiliza el comando Guardar optimizada como para que se abra este cuadro de diálogo:

En el desplegable Tipo selecciona HTML e imágenes para que el programa genere el código del mapa.

Podeis poner a prueba vuestros conocimientos realizando: