Mapas de imágenes
A partir de una imagen podemos hacer que unas zonas de la misma se comporten como enlaces y otras no.
Para ello, tenemos que obtener las coordenadas de los puntos límite de las zonas que queremos convertir en vínculos. Esto lo hacen los programas gráficos. Por ejemplo, en el GIMP las coordenadas de un punto de la imagen aparecen en la parte inferior izquierda.
Las posibilidades de mapa son:
- rect
- Describe un área rectangular. Necesitamos las coordenadas del vértice superior izquierdo y del vértice inferior derecho.
- poly
- Describe cualquier área poligonal. Necesitamos las coordenadas de todos los vértices.
- circle
- Describe un círculo. Necesitamos las coordenadas del centro y el tamaño del radio en píxeles.
A la imagen que vamos a mapear tenemos que ponerle un nombre en el atributo usemap. Este valor debe ser el nombre que queramos pero precedido por el carácter #
<img src="imag/geometria.png" usemap="#geometria" alt="Cuatro figuras geométricas planas" style="width:557px;height:435px">
Luego, debajo de la imagen, utilizamos el elemento map con el atributo name que debe coincidir con el nombre del usemap pero sin el #.
Luego, un elemento area por cada uno de los enlaces que queremos establecer. En nuestro caso van a ser cuatro áreas. Una por cada una de las figuras geométricas. Esta etiqueta es vacía, no tiene etiqueta de cierre.
En la etiqueta tenemos que definir el atributo shape con uno de los valores (rect, circle o poly).
Después el atributo coords. Las coordenadas son dos valores numéricos: el valor de la x y el de la y. Se escriben separadas por una coma y, a su vez, separadas por otra coma con las siguientes coordenadas. Incluído el valor del radio para el círculo.
Como estos fragmentos de imagen son, a su vez, otra imagen, debemos escribir también un texto alternativo, un alt y, finalmente, la href o la URL del destino del vínculo.
Este es el código total empleado:
<img src="imag/geometria.png" usemap="#geometria" alt="Cuatro figuras geométricas planas" style="width:557px;height:435px"> <map name="geometria"> <area shape="poly" coords="19,204,113,19,300,206" alt="Triángulo" href="actividades/triangulo.html"> <area shape="rect" coords="367,36,529,201" alt="Cuadrado" href="actividades/cuadrado.html"> <area shape="poly" coords="7,413,101,242,277,243,342,414" alt="Trapecio" href="actividades/trapecio.html"> <area shape="circle" coords="451,322,92" alt="Círculo" href="actividades/circulo.html"> </map>
Vamos a ver el resultado.
Pulsa sobre cada una de las imágenes y verás que se carga una página con información en este iframe:
Casi por definición, los mapas de imagen no pueden ser adaptables a los distintos tamaños de las pantallas. Las coordenadas se van a modificar...
Parece que hay soluciones pero no son nada sencillas. Hay que hacerlo con programación y, eso, escapa a los objetivos de estos materiales.
