<map> en HTML5El elemento <map> en HTML5 se utiliza para definir un mapa de imagenes, que es una imagen con áreas que pueden hacer clic en ellas, también conocidas como hotspots. Cada una de estas áreas puede enlazarse a diferentes URLs u ejecutar diferentes scripts cuando se hace clic en ellas.
<map>El elemento <map> tiene dos atributos principales:
name: Este atributo es obligatorio y especifica el nombre del mapa de imagen. Este nombre se usa para asociar el mapa de imagen con uno o más elementos <img>.
<map name="exampleMap">id: Aunque no es específico de <map> y es heredado de los atributos globales de HTML, es comúnmente utilizado para identificar el elemento <map> en CSS/JavaScript.
<map name="exampleMap" id="exampleMap">Además de los atributos específicos, <map> también puede llevar atributos globales como:
<map> en HTML5<map> para especificar áreas específicas de una imagen que pueden ser interactivas.usemap en el elemento <img> para asociar la imagen con el mapa de imagen.Primero, necesitas una imagen y un mapa de imagen que contenga las áreas clicables. Puedes especificar cada área usando el elemento <area>. Estos elementos <area> dentro del <map> tienen varios atributos que permiten definir formas y vínculos.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de un Mapa de Imagen</title>
</head>
<body>
<h1>Mapa de Imagen Sencillo</h1>
<img src="example-image.jpg" alt="Ejemplo" usemap="#exampleMap">
<map name="exampleMap">
<area shape="rect" coords="34,44,270,350" alt="Sección 1" href="http://example.com/section1">
<area shape="rect" coords="290,172,333,250" alt="Sección 2" href="http://example.com/section2">
</map>
</body>
</html>En este ejemplo:
example-image.jpg está asociada con exampleMap mediante el atributo usemap="#exampleMap".<map>, se definen dos áreas rectangulares (<area shape="rect">). Las coordenadas coords especifican las ubicaciones y dimensiones de los rectángulos dentro de la imagen.href que define a dónde navega cuando se hace clic en esa área.<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Mapa de Imagen Avanzado</title>
</head>
<body>
<h1>Mapa de Imagen con Varias Formas</h1>
<img src="complex-image.jpg" alt="Ejemplo Complejo" usemap="#complexMap">
<map name="complexMap">
<area shape="circle" coords="200,150,50" alt="Círculo" href="http://example.com/circle"/>
<area shape="poly" coords="300,200, 340, 210, 360, 220, 380, 230, 400, 240" alt="Polígono" href="http://example.com/polygon"/>
</map>
</body>
</html>En este ejemplo:
shape="circle" y las coordenadas (200,150,50) (200, 150 son las coordenadas del centro y 50 es el radio).shape="poly" y una serie de puntos listados en coords.Estos ejemplos ilustran cómo se puede usar HTML5 para crear áreas interactivas en una imagen, mejorando la usabilidad y la navegación en una página web.