¿Cómo hacer mapas de imágenes en HTML5?

La etiqueta HTML <map> se utiliza para definir mapas de imágenes en HTML. Las áreas dentro de la imagen en las que se puede hacer clic se definen mediante la etiqueta <area> .

Sintaxis:

<map name="map-name">

Valor de atributo:

  • nombre: Se utiliza para asociar el mapa con la imagen en la que se utiliza.

Nota: El atributo de nombre en el mapa debe tener el mismo valor que el atributo de mapa de uso de la imagen .

Ejemplo: En este ejemplo, el área resaltada es el área mapeada, al hacer clic en ella se accede al sitio web.

HTML

<!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">    
</head>
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/array-2.png"
        alt="gfgimage" usemap="#mapID">
   
    <map name="mapID">
        <area shape="rect" 
            coords="34, 44, 270, 350"
href="https://www.geeksforgeeks.org/data-structures/?ref=shm">
    </map>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por manishkrjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *