Sabemos cual es el elemento básico de navegación de una web: El enlace hipertexto. Sabemos que estos enlaces son palabras, textos o imágenes que, al pinchar sobre ellos, nos envían a otras páginas o zonas. Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geométricas y funcionan exactamente del mismo modo que los otros enlaces. No tiene que ser toda la imagen, puede ser parte de ella la que sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags usadas para esto son:
- Las tags <map>.....</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.
- El tag <area> define las áreas que vamos a poder activar en esa imagen. A esta tag le acompañan los siguientes atributos:
- shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de:
- rect (rectangular)
- poly (poligonal)
- circle (circular).
- Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.
- Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo:
usemap="#nombre del mapa". Un ejemplo de una imagen mapeada es la siguiente, donde tiene un enlace en una zona específica.
<img src="campo_fsala2.jpg" alt="Prueba" width="500" height="260" border="0" usemap="#campo">
<map name="campo">
<area alt="centro del campo" shape="circle" coords="250,125,33" href="http://www.tostring.es">
<area alt="area defensa" shape="poly" coords="12,196,61,181,83,144,83,94,62,60,11,50" href="http://www.tostring.es">
<area alt="area defensa" shape="poly" coords="486,201,439,188,418,158,418,106,441,67,486,54" href="http://www.tostring.es">
</map>
