Definición destacada
¿Como funciona el comando en HTML5: 'map'?
Última modificación: 2024-06-18
Descripción y Atributos del Elemento <map> en HTML5
El 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.
Atributos del Elemento <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">
Atributos Globales
Además de los atributos específicos, <map> también puede llevar atributos globales como:
- class: Para asignar una o más clases CSS.
- style: Para aplicar estilos en línea.
- title: Para proporcionar información adicional al usuario, típicamente mostrada como un tooltip.
Uso del Elemento <map> en HTML5
- Definir áreas en una imagen: Utilizas el elemento
<map>para especificar áreas específicas de una imagen que pueden ser interactivas. - Asociar la imagen con el mapa: Usas el atributo
usemapen el elemento<img>para asociar la imagen con el mapa de imagen.
Ejemplos Sencillos de Uso
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.
Ejemplo 1: Mapa de Imagen con Áreas Rectangulares
<!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:
- La imagen
example-image.jpgestá asociada conexampleMapmediante el atributousemap="#exampleMap". - Dentro del
<map>, se definen dos áreas rectangulares (<area shape="rect">). Las coordenadascoordsespecifican las ubicaciones y dimensiones de los rectángulos dentro de la imagen. - Cada área tiene un
hrefque define a dónde navega cuando se hace clic en esa área.
Ejemplo 2: Mapa de Imagen con Áreas Circulares y Poligonales
<!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:
- La primera área es circular, definida por el atributo
shape="circle"y las coordenadas(200,150,50)(200, 150 son las coordenadas del centro y 50 es el radio). - La segunda área es un polígono, definido por el atributo
shape="poly"y una serie de puntos listados encoords.
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.