Atributo usemap de HTML <img>

Etiqueta <img> de HTML

Definición y uso

usemap Atributo define la imagen como un mapa de imágenes del cliente.

Un mapa de imágenes es una imagen con áreas clicables.

usemap Atributo con Elemento <map> Asociado con la propiedad name o id, para establecer la relación entre <img> y <map>.

Nota:No se puede usar con elementos descendientes de <a> o <button>. usemap Atributos.

Lea más: Explicación detallada de la propiedad usemap

Ejemplo

Mapa de imágenes con áreas clicables:

<img src="life.png" alt="Vida" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computadora" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Teléfono" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Copa de café" href="coffee.html">
</map>

Inténtelo usted mismo

Sintaxis

<img usemap="#mapname">

Valor de la propiedad

Valor Descripción
#mapname El carácter de número romano (#) seguido del nombre del elemento <map> que se utilizará.

Lea más: Explicación detallada de la propiedad usemap

usemap La propiedad proporciona un mecanismo de mapeo de imágenes "cliente", que efectivamente elimina el procesamiento de coordenadas del ratón en el lado del servidor, así como los problemas de retraso de red derivados. A través de las etiquetas <map> y <area> especiales, los creadores de HTML pueden proporcionar una descripción de la mapeo de las áreas sensibles a enlaces de la imagen usemap, que incluye la URL correspondiente del enlace. El valor de la propiedad usemap es una URL que apunta a un área especial <map>. El navegador del usuario convertirá las coordenadas del clic del ratón en la imagen en acciones específicas, incluyendo la carga y visualización de otro documento.

Vamos a explicar con un ejemplo, el siguiente código fuente mapea una imagen de 100x100 píxeles, map.gif, a 4 áreas. Al hacer clic en una de estas áreas, el usuario será redirigido a diferentes documentos. Tenga en cuenta que en esta etiqueta <img>, hemos incluido efectivamente la funcionalidad de mapeo de imágenes ismap, por lo que aquellos usuarios de navegadores que no tienen la funcionalidad de usemap, pueden manejar el mapeo de imágenes a través de otro medio, es decir, mediante mecanismos del lado del servidor:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Diferencias en la aplicación de las propiedades ismap y usemap

El mapa es un buen ejemplo de la aplicación de las propiedades ismap y usemap, por ejemplo, al navegar por el sitio web de una gran empresa a nivel nacional, los usuarios pueden hacer clic en la ciudad donde viven en el mapa para obtener la dirección y el número de teléfono de las tiendas minoristas cercanas, entre otros.

Las ventajas del procesamiento del cliente de mapas ismap es que no requiere un servidor o software de servidor especial, a diferencia del mecanismo ismap, se puede usar en entornos no web (sin red), como en archivos locales o CD-ROM.

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Etiqueta <img> de HTML