loader image
Etiqueta area
Cómo hacer un area clicable en una imagen en HTML

La etiqueta <map> en palabras simples nos permite hacer que cierta área de una imagen sea clicable, es decir que se puede hacer clic sobre el mismo y actúe como un botón con su enlace a otra página y todo.

Uso de la etiqueta <area>

Para poder usar esta etiqueta primero necesitamos de una imagen insertada en nuestro documento HTML, es decir primero habrá una etiqueta <img>

<img src="fondo.jpg" alt="" usemap="#image-map">

Nótese que tiene un atributo especial que es el usemap, el mismo que tiene como valor #image-map. Este valor es el nombre del mapa que vamos a utilizar y que a su vez contendrá areas que serán clicables. Este nombre lo ponemos nosotros así que puede ser cualquiera.

Imagen de ejemplo
Imagen insertada en documento HTML

A la imagen insertada vamos a hacer que solamente la región que contiene el cuadro de la pared sea el área clicable.

Lo segundo que vamos a necesitar es un mapa que contendrá el mismo nombre que está en el usemap de la imagen:

<map name="image-map"> </map>

Finalmente insertaremos nuestra área dentro de la etiqueta <map>. Y esto se lo realiza de la siguiente manera:

<img src="fondo.jpg" alt="" usemap="#image-map">
<map name="image-map">   
  <area target="" alt="" title="" href="https://www.amazon.com" coords="213,168,380,393" shape="rect">
</map>

Hay que tomar en cuenta que la etiqueta <area> tiene los mismo atributos que un enlace como son:

  • target que indica si queremos que se abra el enlace en una nueva pestaña o en la misma
  • alt que nos permite ingresar un texto alterno y que se va a mostrar en caso de que no se carge correctamente la imagen
  • title que como su nombre nos indica será el título de la imagen
  • href indicando a donde se dirigirá el link
  • coords con las coordenas del área clicable; y finalmente
  • shape que indica cual es la forma de las coordenadas ingresadas enteriormente. Existen tres formas, rectangular, círcular y en polígono.

Para calcular las coordenadas hay páginas gratuitas online como esta de aquí que te permite subir una imagen, seleccionar el area que deseas que se convierta en clicable y te genera el código para que insertes en tu página HTML

Con esto todo está listo para que cuando el usuario haga clic en el cuadro de la imagen lo redireccione a amazon.

Acerca de esta serie…

Esta es una serie de artículos donde iré explicando cada una de las etiquetas que contiene HTML. Si quieres ver la siguiente etiqueta te recomiendo hacer click aquí. Y si no tienes claro que es HTML aún te recomiendo ver este blog aquí.

Sígueme en mis redes sociales:

👉‍‍ YouTube
👉‍‍ Twitter
👉‍‍ GitHub
👉‍‍TikTok

También puedes conocer más sobre los comentarios en HTML en el siguiente video:

👇‍‍👇‍‍👇‍‍

Quizás también te interese leer…

 

 

Únete a la conversación

 

 

0 Comments

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete

Lo mejor de mi contenido directo en tu bandeja de entrada

No te preocupes,  a mi tampoco me gusta el spam. Solo tendrás lo más nuevo de CodingTube