# HTML map: Como criar imagens clicáveis em HTML HTML map é o nome dado a uma imagem ou vídeo que possui diversas áreas clicáveis que redirecionam os usuários a URLs internos ou externos. As áreas com links nesse tipo de mapa são criadas a partir de coordenadas específicas e associadas a URLs ou endereços web. ## O que é HTML map? HTML map (também chamado de map image HTML) é uma imagem clicável que aumenta o nível de intuitividade e interatividade com os usuários. Mais especificamente, o HTML map é usado para inserir **diversos links e áreas clicáveis** em imagens e vídeos de um documento HTML. As áreas referenciadas podem incluir subpáginas, hyperlinks para URLs internos ou externos ou links para downloads. Assim que o usuário clica no elemento, o conteúdo é exibido ou ações específicas são acionadas. A tag HTML `` é usada para gerar mapas de imagem. Já a tag <img> HTML é usada para integrar esses mapas. Caso não queira criar seu próprio HTML map, você pode recorrer aos **geradores de mapas de imagem**. Essas ferramentas on-line permitem que o usuário envie uma imagem e defina em quais áreas inserir os links. Dica Quer saber mais sobre **o funcionamento do HTML suas possibilidades de uso**?. Nosso tutorial de HTML para iniciantes traz uma introdução rápida e fácil de entender sobre essa linguagem de marcação. ## Por que criar HTML map? Você pode integrar um mapa de imagem **a qualquer documento HTML** após definir suas respectivas áreas de referência. A vantagem de usar mapas de imagem é que eles permitem criar links para múltiplos destinos dentro de uma mesma imagem ou vídeo. Um HTML map pode ser usado em: - Mapas com áreas clicáveis de regiões, cidades, empresas ou estações - Imagens de receitas com informações adicionais sobre os ingredientes - Banners de anúncios com links para diferentes produtos, categorias ou serviços - Exibições de informações adicionais ou publicidades em vídeos - Sites com mapas de imagem com múltiplos elementos de navegação - Exibições de diversos modelos, funções ou níveis em jogos on-line ## Como criar HTML map? O elemento HTML `` é usado para gerar um mapa de imagem. Ao criar este elemento, você precisa incluir o atributo `name` para fazer uma referência ao mapa. Com o nome do mapa, é possível implementar ancoragens, criar links ou fazer referências a áreas específicas de uma imagem ou vídeo. Mais adiante, detalharemos como você pode **especificar as coordenadas dessas áreas**. Um HTML map pode ser posicionado **em qualquer parte de um documento HTML**. Para fazer isso, defina as áreas e coordenadas (`coords`) que especificam a posição, o tamanho e o formato da área de referência. Essas áreas podem ser inseridas em uma imagem na forma de um retângulo, polígono ou círculo. As coordenadas variam conforme o formato da área de referência, sendo expressas de maneira diferente para retângulos, círculos e polígonos. Use o atributo HTML `` para definir **áreas individuais no mapa de imagem**. É necessário incluir pelo menos um atributo `area` para criar esse tipo de mapa. Use os atributos HTML a seguir para especificar as propriedades do mapa de imagem e suas respectivas áreas de referência: - `shape`: O atributo `shape` define o formato das áreas clicáveis em uma imagem. Você pode escolher entre `rect` (retângulo), `circle` (círculo) e `poly` (polígono). A sintaxe de um retângulo é `rect = x1,y1,x2,y2`, em que `x1` e `y1` definem as coordenadas do canto superior esquerdo, enquanto `x2` e `y2` sinalizam o canto inferior direito. Para um círculo, a sintaxe é `circle = xc,yc,raio`. No caso de polígonos, use `poly = x1,y1,x2,y2,x3,y3 …`. - `coords`: O atributo `coords` especifica as coordenadas em pixels que definem a área clicável. Essas coordenadas costumam ser determinadas quando se usa um editor gráfico. - `href`: O atributo `href` define o link da área clicável para um URL interno ou externo. - `alt`: O atributo `alt` define um texto alternativo que será exibido caso o mapa de imagem não carregue corretamente, garantindo a acessibilidade do conteúdo. Esse recurso é especialmente útil para navegadores que funcionam apenas com textos e usuários com deficiência. - `title`: O atributo `title` adiciona uma breve descrição que é exibida quando o usuário passa o mouse sobre a respectiva área da imagem. - `img`: A tag `img` é usada para incorporar e exibir uma imagem em um documento HTML. ## Como integrar HTML map a página web? Após configurar o mapa, você poderá incorporá-lo **no local desejado em seu site** usando a tag HTML ``. Para criar um link no mapa de imagem e torná-lo funcional, é necessário inserir o elemento ``. O código a seguir exemplifica como fazer essa implementação: ```html praia oceano céu ``` Definimos três áreas clicáveis na imagem abaixo: praia, oceano e céu. Quando os usuários clicam nessas áreas, eles são automaticamente redirecionados às respectivas landing pages, que são abertas em novas janelas. [![Imagem: Exemplo de imagem com marcações HTML map](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/9/1/csm_beach-image_38f2aa397d.webp "Exemplo de imagem com marcações HTML map")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/beach-image.jpg) Neste exemplo, três áreas de HTML map foram definidas usando o atributo de formato retangular This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-map/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-map/) for AI/LLM consumption.