Atributo usemap do HTML <img>

Definição e uso

usemap Atributo define a imagem como um mapa de imagem do cliente.

Mapa de imagem se refere a uma imagem com área clicável.

usemap Atributo Elemento <map>. associado ao atributo name ou id, para estabelecer a relação entre <img> e <map>.

Atenção:Não pode ser usado se o elemento <img> é descendente de <a> ou <button>. usemap Atributos.

Leia mais: Explicação detalhada da propriedade usemap

Exemplo

Mapa de imagem com área clicável:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

Experimente você mesmo

Sintaxe

<img usemap="#mapname">

Valor da propriedade

Valor Descrição
#mapname O caractere de número ("#") seguido do nome do elemento <map> a ser usado.

Leia mais: Explicação detalhada da propriedade usemap

usemap A propriedade oferece um mecanismo de mapeamento de imagem "cliente", que eficazmente elimina o processamento de coordenadas do mouse no servidor, bem como os problemas de atraso de rede decorrentes disso. Através das tags <map> e <area> especiais, os criadores de HTML podem fornecer uma descrição da coordenação das áreas sensíveis a hiperlinks na imagem usemap, que inclui os URLs correspondentes. O valor da propriedade usemap é um URL que aponta para a área especial <map>. O navegador do computador do usuário convertirá as coordenadas do clique do mouse na imagem em ações específicas, incluindo a carga e a exibição de outro documento.

Vamos exemplificar, o seguinte código-fonte mapeia uma imagem de 100x100 pixels, map.gif, em 4 áreas. Quando o usuário clicar em uma dessas áreas, ele será redirecionado para diferentes documentos. Note que, dentro dessa tag <img>, já incluímos a funcionalidade de mapeamento de imagem ismap, permitindo que os usuários de navegadores que não possuem a funcionalidade usemap, processem o mapeamento de imagem por meio de um mecanismo de 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>

Diferenças na aplicação de atributos ismap e usemap

O mapa é um bom exemplo de aplicação de atributos ismap e usemap, por exemplo, ao navegar no site de uma grande empresa nacional, o usuário pode clicar na cidade onde reside no mapa para obter endereços e números de telefone de lojas de varejo na vizinhança.

Os benefícios do processamento do cliente de imagem mapeada pelo usemap é que ele não requer servidor ou software de servidor especial, diferentemente do mecanismo ismap, ele pode ser usado em ambientes não web (sem rede), por exemplo, usando arquivos locais ou CD-ROM.

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte