HTML area

La etiqueta <area> en HTML es un elemento de mapa de imagen, utilizado para crear áreas activas en una imagen. Estas áreas activas pueden ser enlaces, que permiten al usuario hacer clic en una parte específica de una imagen y dirigirse a otra página web o sección de la misma.

Para utilizar la etiqueta <area> se debe tener una etiqueta <map> como contenedor, el atributo name de la etiqueta <map> se refiere al atributo usemap de la etiqueta <img> para relacionar ambas.

Ejemplo de uso

Este es un ejemplo de cómo se utiliza:

<img src="mapa.jpg" usemap="#mapa">
<map name="mapa">
  <area shape="rect" coords="0,0,50,50" href="link1.html" alt="link 1">
  <area shape="circle" coords="60,60,20" href="link2.html" alt="link 2">
</map>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando una imagen llamada “mapa.jpg” y se están definiendo dos áreas activas en ella, una con forma de rectángulo y otra con forma de círculo, ambas con sus respectivos enlaces.

Sí, la etiqueta <area> es una de las etiquetas esenciales para crear mapas de imágenes en HTML. Es importante mencionar que la etiqueta <area> es un elemento vacío, es decir, no tiene contenido y no necesita ser cerrado, y además, solo puede ser utilizado dentro de una etiqueta <map>.

Una vez que se ha definido un mapa de imagen con varias áreas activas mediante la etiqueta <area>, se puede utilizar el atributo usemap en una etiqueta <img> para relacionar la imagen con el mapa. El valor del atributo usemap debe ser el mismo que el atributo name de la etiqueta <map>.

Atributos

Los atributos más importantes de la etiqueta <area> en HTML son:

• shape: indica la forma geométrica del área activa, puede ser “rect” (rectángulo), “circle” (círculo) o “poly” (polígono). Este atributo es esencial para definir la forma del área activa.

• coords: especifica las coordenadas del área activa. El formato depende de la forma especificada en el atributo shape. Este atributo es esencial para indicar donde se encuentra el área activa en la imagen.

• href: especifica la URL a la cual se dirigirá el usuario al hacer clic en el área activa. Este atributo es esencial para establecer el enlace del área activa.

• alt: especifica un texto alternativo que se mostrará si la imagen no se carga correctamente. Este atributo es importante para mejorar la accesibilidad de la página.

• usemap: especifica el nombre del mapa de imagen al que esta área pertenece. Este atributo es importante para relacionar la etiqueta <img> con el mapa de imagen.

Es importante mencionar que estos atributos son los más importantes para crear un área activa en una imagen y establecer un enlace.

Sin embargo, también se pueden utilizar otros atributos como class, id, style, entre otros, para modificar el estilo o comportamiento de la etiqueta.

Más ejemplos

Claro, aquí tienes algunos ejemplos adicionales de cómo utilizar la etiqueta <area> en HTML:

1. Crear un área activa en forma de rectángulo en una imagen:

<img src="mapa.jpg" usemap="#mapa">
<map name="mapa">
  <area shape="rect" coords="10,10,50,50" href="link1.html" alt="link 1">
</map>
Lenguaje del código: HTML, XML (xml)

2. Crear un área activa en forma de círculo en una imagen:

<img src="mapa.jpg" usemap="#mapa">
<map name="mapa">
  <area shape="circle" coords="100,100,30" href="link2.html" alt="link 2">
</map>
Lenguaje del código: HTML, XML (xml)

3. Crear varias áreas activas en una imagen:

<img src="mapa.jpg" usemap="#mapa">
<map name="mapa">
  <area shape="rect" coords="10,10,50,50" href="link1.html" alt="link 1">
  <area shape="circle" coords="100,100,30" href="link2.html" alt="link 2">
  <area shape="poly" coords="200,10,250,50,300,10" href="link3.html" alt="link 3">
</map>
Lenguaje del código: HTML, XML (xml)

En estos ejemplos se están creando áreas activas en forma de rectángulo, círculo y polígono, respectivamente. Es importante mencionar que el valor de los atributos coords pueden variar dependiendo de las dimensiones de la imagen y la posición del área activa.