Unidad 5. Imágenes (XII)

5.14. Mapas de imagen

Un mapa de imagen es una imagen sobre la que podemos definir áreas con enlaces. Es decir, podemos poner varios enlaces distintos en una misma imagen.

El mapa lo definimos con la etiqueta <map></map>. El mapa debe tener el atributo name para identificarlo de forma única dentro de la página web.

Dentro del mapa, se van definiendo las áreas con etiquetas <area />. Como mínimo, llevan tres atributos:

• shape, que es la forma del área, pudiendo ser rect (rectángulo), circle (círculo) o poly (polígono).
• coords indica las coordenadas del área, en píxeles. Depende de la forma. Por ejemplo, un rectángulo tiene cuatro valores: inicio-x, inicio-y, fin-x, fin-y, que son las coordenadas de la esquina superior izquierda y de la esquina inferior derecha. Un círculo, centro-x, centro-y (coordenadas del centro) y el radio, y un polígono un valor x, y para cada punto. Las coordenadas se dan respecto al tamaño de la imagen en pixels teniendo en cuenta que el punto (0,0) es la esquina superior izquierda.
• href es la dirección del enlace.

Después, para asociar el mapa a la imagen, añadimos a la imagen el atributo usemap, como se ve en el siguiente código para el mapa de Sudamérica donde hemos creado un área para Brasil y otra para Argentina:

<img src="graficos/mapa_sudamerica.jpg" alt="" width="360" height="500" usemap="#sudamerica"/>
  <map name="sudamerica" id="sudanerica">
    <area shape="poly" coords="233,306,108,110,327,142" href="https://es.wikipedia.org/wiki/Brasil" target="_blank" alt="Brasil" />
    <area shape="poly" coords="168,450,130,272,197,289" href="https://es.wikipedia.org/wiki/Argentina" target="_blank" alt="Argentina" />
  </map>

Se obtiene el siguiente resultado, al hacer clic en Brasil enlaza con la página de Brasil en la Wikipedia y lo mismo para Argentina:

Ejercicio propuesto de la Unidad 5

Prueba evaluativa de la Unidad 5

 Cursos Informática Gratuitos