En HTML, el atributo que se emplea para asociar una imagen con un mapa de imagen del lado del cliente es el atributo `usemap`. Este atributo se utiliza en la etiqueta `<img>` y apunta al nombre del mapa de imagen mediante un identificador precedido por un símbolo de almohadilla (#). El mapa de imagen se define con la etiqueta `<map>` y sus áreas específicas de interacción se detallan con la etiqueta `<area>`.
En HTML, las zonas activas de un mapa de imagen del lado del cliente se definen con la etiqueta `<area>`. Cada `<area>` especifica una región en la imagen que se mapea a una URL o realiza una acción específica cuando se hace clic en esa área. Estas áreas se suelen utilizar en conjunto con la etiqueta `<map>` para crear mapas de imagen interactivos.
Aquí tienes un ejemplo básico de cómo se utiliza un mapa de imagen en HTML:
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa de Imagen Ejemplo</title>
</head>
<body>
<h2>Mapa de Imagen Ejemplo</h2>
<img src="imagen.jpg" alt="Mapa de Imagen" usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="0,0,50,50" href="pagina1.html" alt="Área 1">
<area shape="circle" coords="100,100,50" href="pagina2.html" alt="Área 2">
<area shape="poly" coords="200,0,250,50,200,100" href="pagina3.html" alt="Área 3">
</map>
</body>
</html>
```
En este ejemplo:
- Se muestra una imagen (`imagen.jpg`) dentro de un elemento `<img>`.
- La etiqueta `<map>` crea el mapa de imagen y se le asigna el nombre "mapa".
- Las etiquetas `<area>` definen las áreas clicables de la imagen. En este caso, hay tres áreas: una rectangular, una circular y una poligonal.
- Cada `<area>` especifica las coordenadas y un enlace (`href`) que se activará cuando se haga clic en esa área.
Este es un ejemplo básico, pero los mapas de imagen son útiles para crear interfaces interactivas en imágenes, como menús o enlaces sensibles a áreas específicas de una imagen.
Descripción:
"Descubre la versatilidad de los mapas de imagen en HTML para crear experiencias visuales interactivas. Aprende a definir áreas clicables en imágenes y vincularlas a enlaces específicos. Ejemplos prácticos y guías para aprovechar al máximo esta funcionalidad en tus proyectos web."
0 Comentarios