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.



Castilla-Leon Castilla-La Mancha Extremadura Melilla Ceuta Andalucia Madrid La Rioja Navarra Euskadi Cantabria Asturias Galicia Islas Canarias Islas Baleares Murcia Aragon Catalunya Comunidad Valenciana

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.


Grupo de 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.


Ventana flotante de herramientas

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


Ventana de Contenido de Web

Ahora podremos utilizar la herramienta de Selección de mapa de imágenes 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:


Barra de Opciones del Selector de mapa de imágenes

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


Ventana de propiedades de Mapa de imagen

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:



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


Botones de posicionamiento de Mapa de imágenes

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 Traer Mapa de imagen hacia adelante, hacia abajo Traer Mapa de imagen hacia atrás, colocarlas encima de todas Traer Mapa de imagen al frente o debajo Traer Mapa de imagen atrás.


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:


Cuadro de diálogo de Guardar optimizada como

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:

 Ejercicios del Tema 14.

Prueba evaluativa del Tema 14.






Octubre - 2006.


Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.