Mapas de imagen

¿Qué es un mapa de imagen? Se trata de una imagen que contiene zonas sensibles donde, al pasar el mouse, se activa un link. Aquí muestro dos variantes: una sola imagen con zonas sensibles, y una segunda opción donde se dividió la gran imagen en tres imágenes, y se aplicó el intercambio de imágenes explicado en el post anterior.

Mapa de imagen con zonas sensibles y enlaces externos

Para realizarlo, se utiliza una imagen de base con la propiedad usemap, que vincula la imagen con el mapa que describimos previamente, siempre utilizando el atributo ALT, de acuerdo a las recomendaciones de accesibilidad.

Mapamundo Kepler

America septentrionalis Septentrio Terra Australis Incognita Mar di India

Detenga el mouse en los continentes para leer su nombre

El problema que encontré en este caso, es que en el celular con Android no se muestran los Titles ni los ALT. Este es el código del mapa de imagen anterior:

<img alt=”Mapamundo Kepler” src=”800px-Kepler-world.jpg” usemap=”#mapa1″ width=”600″ border=”0″ />

<map id=”mapa1″ name=”mapa1″>

<area title=”America septentrionalis” alt=”America septentrionalis” coords=”10,10,120,234″ shape=”rect” href=”http://……” />

<area title=”Septentrio” alt=”Septentrio” coords=”150,10,350,225″ shape=”rect” href=”http://……” />

<area title=”Terra Australis Incognita” alt=”Terra Australis Incognita” coords=”150,225,350,450″ shape=”rect” href=”http://……” />

<area title=”Mar di India” alt=”Mar di India” coords=”350,10,550,450″ shape=”rect” href=”http://……” /> </map>

<p style=”text-align: center;”>Detenga el mouse en los continentes para leer su nombre</p>

Ejemplo sin mapa de imagen

Utilizando lo explicado en el post anterior, dividimos la imagen grande en varias imágenes pequeñas, a las cuales les cambiamos el aspecto al pasar sobre ellas:

America septentrionalis
Septentrio y Terra Australis Incognita
Mar di India

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *