Saltar al contenido

Mapas de imágenes HTML

septiembre 29, 2021
workplace

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


Mapas de imágenes

El HTML <map> etiqueta define un mapa de imagen. Un mapa de imágenes es una imagen con áreas en las que se puede hacer clic. Las áreas se definen con uno o más <area> etiquetas.

Intente hacer clic en la computadora, el teléfono o la taza de café en la imagen a continuación:

Lugar de trabajo

Sun Mercury Venus

Ejemplo

Aquí está el código fuente HTML para el mapa de imágenes de arriba:

Computadora Phone
Coffee

Inténtalo tú mismo »


¿Como funciona?

La idea detrás de un mapa de imagen es que debería poder realizar diferentes acciones dependiendo de en qué parte de la imagen haga clic.

Para crear un mapa de imágenes, necesita una imagen y un código HTML que describa las áreas en las que se puede hacer clic.



La imagen

La imagen se inserta utilizando el <img> etiqueta. La única diferencia con otras imágenes es que debe agregar un usemap atributo:

Lugar de trabajo

los usemap el valor comienza con una etiqueta hash
# seguido del nombre del mapa de imagen, y se utiliza para crear una relación entre la imagen y el mapa de imagen.

Propina: ¡Puedes usar cualquier imagen como mapa de imágenes!


Crear mapa de imagen

Luego, agregue un <map> elemento.

los <map> El elemento se utiliza para crear un mapa de imagen y está vinculado a la imagen mediante el uso de name
atributo:

los name El atributo debe tener el mismo valor que el
<img>‘s usemap atributo.


Las areas

Luego, agregue las áreas en las que se puede hacer clic.

Un área en la que se puede hacer clic se define mediante un <area> elemento.

Forma

Debe definir la forma del área en la que se puede hacer clic y puede 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

También debe definir algunas coordenadas para poder colocar el área en la que se puede hacer clic en la imagen.


Forma = «rect»

Las coordenadas para shape="rect" vienen en pares, uno para el eje xy otro para el eje y.

Entonces, las coordenadas 34,44 se encuentra a 34 píxeles del margen izquierdo y 44 píxeles del margen superior:

Lugar de trabajo

Las coordenadas 270,350 se encuentra a 270 píxeles del margen izquierdo y 350 píxeles del margen superior:

Lugar de trabajo

Ahora tenemos suficientes datos para crear un área rectangular en la que se puede hacer clic:

Ejemplo

Inténtalo tú mismo »

Esta es el área en la que se puede hacer clic y enviará al usuario a la página «computer.htm»:

Lugar de trabajo


Forma = «círculo»

Para agregar un área de círculo, primero ubique las coordenadas del centro del círculo:

337,300

Lugar de trabajo

Luego especifique el radio del círculo:

44 pixeles

Lugar de trabajo

Ahora tiene suficientes datos para crear un área circular en la que se puede hacer clic:

Esta es el área en la que se puede hacer clic y enviará al usuario a la página «coffee.htm»:

Lugar de trabajo


Forma = «poli»

los shape="poly" contiene varios puntos de coordenadas, lo que crea una forma formada con líneas rectas (un polígono).

Esto se puede utilizar para crear cualquier forma.

¡Como tal vez en forma de croissant!

¿Cómo podemos hacer que el croissant de la imagen de abajo se convierta en un enlace en el que se puede hacer clic?

Comida francés

Tenemos que encontrar las coordenadas xey para todos los bordes del croissant:

Comida francés

Las coordenadas vienen en pares, una para el eje xy otra para el eje y:

Ejemplo

Inténtalo tú mismo »

Esta es el área en la que se puede hacer clic y enviará al usuario a la página «croissant.htm»:

Comida francés


Mapa de imagen y JavaScript

Un área en la que se puede hacer clic también puede activar una función de JavaScript.

Agrega un click evento al <area> elemento para ejecutar una función de JavaScript:

Ejemplo

Aquí, usamos el atributo onclick para ejecutar una función de JavaScript cuando se hace clic en el área:

Inténtalo tú mismo »


Resumen del capítulo

  • Usa el HTML <map> elemento para definir un mapa de imagen
  • Usa el HTML <area> elemento para definir las áreas en las que se puede hacer clic en el mapa de imagen
  • Usa el HTML usemap atributo del
    <img> elemento para apuntar a un mapa de imagen

Etiquetas de imagen HTML

Etiqueta Descripción
Define una imagen
Define un mapa de imágenes
Define un área en la que se puede hacer clic dentro de un mapa de imágenes
Define un contenedor para múltiples recursos de imágenes.
close