Cómo crear enlaces dentro de imágenes [Mapas de Imagen en HTML]

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

Mapas de imagen

Con los mapas de imagen se pueden añadir zonas clicables sobre una imagen.

<map>

La etiqueta <map> define un mapa de imagen con áreas clicables.

En el ejemplo de abajo puedes clicar sobre la piña, una calabaza y el ordenador.

See the Pen HTML | 1.16 - Mapas de imagen by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Cómo funciona?

Necesitamos una imagen y una etiqueta <map> que contiene la información de las áreas clicables.

La imagen

La imagen se inserta con un <img>. Y le añadimos el atributo usemap.

<img src="imagen.jpg" alt="Imagen" usemap="#map">

El valor del usemap empieza con un # seguido del name del mapa que queramos vincular.

El mapa

Es un elemento <map> y se vincula a través del atributo name a la imagen.

<map name="map">

El elemento <map> se puede insertar en cualquier parte del documento, no afecta el orden.

Las áreas - Formas

Dentro de la etiqueta <map> añadimos las áreas clicables usando la etiqueta <area>

Tenemos diferentes formas:

  • rect: para una forma rectangular.
  • circle: para una forma circular.
  • poly: define un polígono como región.
  • default: define toda la región.

Las áreas - Coordenadas

Hay que definir las coordenadas donde estará el área clicable.

Las coordenadas van de dos en dos valores, para el eje x y el eje y. Y se cuenta en pixeles.

En el ejemplo de arriba, la primera área tiene 210 pixeles de margen desde la izquierda, y 0 pixeles de margen desde arriba. Y 400 pixeles desde la izquierda y 160 desde arriba.

<area shape="rect" coords="210, 0, 400, 160">

Las áreas - Círculos

Tan solo tienen una coordenada, y el tercer parámetro es el radio del circulo.

<area shape="circle" coords="100, 215, 35">

Las áreas - href

Se le puede añadir el atributo href para definir el destino al que va el enlace.

Las áreas - JavaScript

También un área puede llamar a una función de JavaScript usando el onclick.

<area shape="rect" coords="210, 0, 400, 160" alt="Computadora" onclick="clickFunction()">

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares