¿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.
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:
