Paso 17: Mapa de imagen accesibles

Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen.

Hemos de crear mapas del lado de los usuarios mediante la atributo "usemap".
Estos mapas de imágenes se definen con la etiqueta <map> que determinará cada área de la imagen con un enlace establecido.
La etiqueta <area> contendrá los siguientes atributos:

• Alt: para mostrar el equivalente de la imagen.
• Shape: indica el tipo de área seleccionada que puede ser de tres tipos:
 - "rect"---crea un área rectangular.

- "circle"--- crea un área circular.

- "poly" --- crea un área poligonal.  

• Coords: serán las coordenadas que definiran el área.
• Href: para indicar el destino del enlace correspondiente al área.

A modo de ejemplo, he creado el siguiente mapa donde cada círculo nos llevará a una sección distinta del blog.
El círculo rojo, nos llevará a la página principal, el cículo amarillo, a mis datos personales y el círculo azul al primer post de este blog.

El código HTML de este mápa de imagen es el siguiente:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM0HU_wOYroMFs7blHZUY_rQN0ulBbZG5Dd1UATVpskposXo7j_dZeDtvLpAWRNXVI06OuqzZFwZaoOW7MgM22JEDjvXMx7aKSubaqZYz-4oBCFgaMVwNUXtYlXR5FVE9BVo0kMC5-kB4/s1600/circulos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Imagen con tres círculos que enlazan a tres apartados de este blog" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM0HU_wOYroMFs7blHZUY_rQN0ulBbZG5Dd1UATVpskposXo7j_dZeDtvLpAWRNXVI06OuqzZFwZaoOW7MgM22JEDjvXMx7aKSubaqZYz-4oBCFgaMVwNUXtYlXR5FVE9BVo0kMC5-kB4/s320/circulos.jpg" title="Enlaces a tres zonas de este blog" usemap="#MAP32263126" width="320" /></a>

<map name="MAP32263126">

<area alt="Ir a la página principal" coords="47,17, 68,17, 96,35, 105,62, 104,89, 94,111, 67,131, 45,126, 26,109, 15,82, 17,56, 26,34, 42,21, 47,17" href="http://accesibilidadatodos.blogspot.com.es/" shape="POLY" ></area>

<area alt="Ir a mis datos personales" coords="131,97, 111,120, 102,156, 115,188, 134,206, 168,203, 187,181, 197,148, 194,127, 179,107, 161,96, 131,97" href="http://www.blogger.com/profile/08720898324792798156" shape="POLY"></area>

<area alt="Ir al primer post del blog" coords="218,179, 199,206, 195,244, 209,270, 235,287, 266,275, 284,251, 285,221, 273,191, 248,173, 218,179" href="http://accesibilidadatodos.blogspot.com.es/2012/04/paso-1-para-quien-es-la-accesibilidad.html" shape="POLY" ></area>

</map>

Como se puede ver, se ha incluido todos los atributos definidos anteriormente, y además he insertado el atributo <alt> y <title> también para la imagen en general.

Problemas surgidos:

•  La razón por la cual no lograba que dicho mapa me apareciese era porque tan solo insertaba el código que me proporcionaba el programa Image Mapper. Lo que tenía que hacer era  subir dicha imagen desde el editor de artículos de blogger para copiar la "src" de la imagen en lugar de la que me ofrecía el programa Image Mapper.Tan solo cambiando esto, ya tenía mi mapa de imagen insertado y podia borrar la imagen subida desde el editor de blogger.