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.
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>
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 |