Mapa de imágenes HTML

13/02/20230 comentarios

Hola a todos, hoy os voy a explicar como funcionan los mapas de imágenes en HTML.

En HTML, podemos hacer mapas interactivos donde cada zona de una imagen cliquemos y nos envié a una web que nosotros indiquemos.

Vamos a utilizar esta foto de ejemplo para ver todas las formas que

Para crear un mapa de imágenes, necesitaremos crear una imagen con la etiqueta img, en ella pondremos como atributo usemap el id de la etiqueta map que crearemos después, se vería algo así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>

    <img src="sistema-solar.jpg" usemap="#image-map">

    <map name="image-map">

    </map>

</body>
</html>

Dentro de la etiqueta map, tendremos una o varias etiquetas area, donde podremos usar los siguientes atributos:

href: enlace al que va al clicar sobre el area.
title: titulo del área mientras estamos sobre el enlace.
alt; texto alternativo.
target: forma en que se muestra el enlace, si en la misma pestaña u otra.
shape: tipo de la forma del área, pueden ser circle, rect o poly.
coords: indicamos las coordenadas del área, estos variaran según el tipo de forma.

Tenemos diferentes formas:

circle: se le debe indicar 3 valores en las coordenadas.
- x: posición x de la imagen (horizontal).
- y: posición y de la imagen (vertical).
- radius: radio de la imagen.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>

    <img src="sistema-solar.jpg" usemap="#image-map">

    <map name="image-map">
        <area target="_blank" alt="Mercurio" title="Mercurio" href="https://es.wikipedia.org/wiki/Mercurio_(planeta)" coords="506,134,13" shape="circle">
    </map>

</body>
</html>

rect: se le debe indicar 4 valores en las coordenadas. Cuando tengamos esos dos puntos, se forma un rectangulo.
- x1: posición x del primer punto de la imagen (horizontal).
- y1: posición y del primer punto de la imagen (vertical).
- x2: posición x del segundo punto de la imagen (horizontal).
- y2: posición y del primer punto de la imagen (vertical).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>

    <img src="sistema-solar.jpg" usemap="#image-map">

    <map name="image-map">
        <area target="_blank" alt="Via lactea" title="Via lactea" href="https://es.wikipedia.org/wiki/Vía_Láctea" coords="526,258,55,197" shape="rect">
    </map>

</body>
</html>

poly: tiene un número indeterminado de valores en las coordenadas. Se va formando el area automaticamente, cuantos más puntos pongamos mejor
- x1: posición x de la imagen (horizontal).
- y1: posición y de la imagen (vertical).
- Lo mismo para cada punto.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>

    <img src="sistema-solar.jpg" usemap="#image-map">

    <map name="image-map">
        <area target="_blank" alt="Sol" title="Sol" href="https://es.wikipedia.org/wiki/Sol" coords="607,31,556,106,562,171,583,203,610,228,612,106" shape="poly">
    </map>

</body>
</html>

Como te habrás fijado es complicado poner las coordenadas concretamente, lo mejor es usar esta aplicación web.