Mapas de imagen HTML

Con los mapas de imagen HTML, puedes crear áreas en las que se puedes hacer clic en una imagen.

Mapas de imagen

La etiqueta <map> define un mapa de imagen. Un mapa de imagen es una imagen con áreas en las que se puedes hacer clic.

Ejm

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

¿Como funciona?

La idea detrás de un mapa de imagen es que deberías poder realizar diferentes acciones dependiendo de en qué parte de la imagen hagas clic. Para crear un mapa de imagen, necesitas una imagen y un mapa que contenga algunas reglas que describan las áreas en las que se puede hacer clic.

La imagen

La imagen es incluida utilizando la etiqueta <img>. La única diferencia con otras imágenes es que debes utilizar el atributo usemap, de la siguiente manera.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

El valor de usemap comienza con una etiqueta # seguida del nombre del mapa de imagen, y se usa para crear una relación entre la imagen y el mapa de imagen.

Nota: puedes usar cualquier imagen como mapa de imagen.

El mapa

El siguiente paso es añadir el elemento <map>, el cual es usado para crear el mapa de imagen, y es vinculado a la imagen usando el atributo name, de la siguiente manera.

<map name="workmap">

El atributo name debe tener el mismo valor que el atributo usemap (sin la #).

Nota: Puedes insertar el elemento <map> en cualquier lugar que desees, no tienes que insertarlo justo después de la imagen.

Las áreas

Luego agrega las áreas en las que se puede hacer clic. Un área en la que se puede hacer clic se define usando un elemento <area>.

shape

Debes definir la forma del área y puedes elegir uno de estos valores:

  • rect: define una región rectangular.
  • circle: define una región circular.
  • poly: define una región poligonal.
  • default: define toda la región.

Coordenadas

Debes definir algunas coordenadas para poder colocar el área en la que se puede hacer clic en la imagen. Las coordenadas vienen en pares, una para el eje x y otra para el eje y. Las coordenadas 34, 44 se encuentran a 34 píxeles del margen izquierdo y 44 píxeles desde la parte superior.

Las coordenadas 270, 350 se encuentran a 270 píxeles desde el margen izquierdo y 350 píxeles desde la parte superior:

Ejm

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Círculo

Para agregar un área circular, primero ubica las coordenadas del centro del círculo, por ejm, 337, 300, después especifica el radio del círculo, el cual será de 44 pixeles.

Ejm

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Mapa de imagen y Javascript

Un área en la que se puede hacer clic no tiene que ser un enlace a otra página, también puede activar una función de JavaScript.

Agrega un evento de clic en el elemento <area> para ejecutar una función de JavaScript.

Puedes usar el atributo onclick para ejecutar una función de JavaScript cuando se hace clic en el área.

Ejm

<area shape="circle" coords="337,300,44" onclick="myFunction()">

Ejm completo

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the cup of coffee to execute a JavaScript function:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

</body>
</html>

Resumen

  • Usamos la etiqueta HTML <map> para definir un mapa de imagen.
  • Usamos la étiqueta HTML <area> para definir áreas clicables en el mapa de imagen.
  • Use el atributo usemap del elemento HTML <img> para apuntar a un mapa de imagen.