HTML - Mapa de Imagem

Preparando a Imagem

Ao criar um mapa de imagem, o primeiro passo é escolher uma imagem que combine com o conteúdo e o design da sua página web. A imagem deve ser clara, atraente e relevante para as áreas clicáveis que você planeja definir. Após selecionar uma imagem, certifique-se de que ela seja adequada para a web otimizando seu tamanho e formato. Imagens grandes podem tornar o carregamento da sua página web mais lento, por isso é importante encontrar um equilíbrio entre qualidade da imagem e tamanho do arquivo. Formatos de imagem comuns para web incluem JPEG, PNG e GIF.

Depois de preparar a imagem, você precisa determinar as áreas clicáveis. Estas são as regiões específicas da imagem com as quais os usuários podem interagir ao clicar. Considere o layout e o conteúdo da sua imagem e decida quais áreas devem ser clicáveis. Você pode usar um software de edição de imagens ou ferramentas online para determinar as coordenadas dessas áreas, o que será necessário ao definir o mapa de imagem.

Usando o Elemento <map>

Para criar um mapa de imagem, você precisa usar o elemento <map> no seu código HTML. O elemento <map> é um contêiner para as áreas clicáveis da sua imagem. Ele requer um atributo name único que identifica o mapa de imagem.

<map name="meuMapaDeImagem">
  <!-- áreas clicáveis serão definidas aqui -->
</map>

Substitua "meuMapaDeImagem" por um nome descritivo para o seu mapa de imagem específico.

Para vincular o mapa de imagem à sua imagem, você precisa usar o atributo usemap no elemento <img>. O valor do atributo usemap deve ser o name do seu mapa de imagem precedido por um símbolo de hash (#).

<img src="imagem.jpg" alt="Minha Imagem" usemap="#meuMapaDeImagem">

Certifique-se de que o name no atributo usemap corresponda ao name que você definiu no elemento <map>.

Definindo Áreas Clicáveis com <area>

Dentro do elemento <map>, você pode definir as áreas clicáveis usando o elemento <area>. Cada elemento <area> representa uma região específica da imagem com a qual os usuários podem interagir. O elemento <area> tem vários atributos que definem a forma, as coordenadas e o link da área clicável.

O atributo shape especifica a forma da área clicável. Ele pode ter valores como "rect" para uma área retangular, "circle" para uma área circular, ou "poly" para uma área poligonal.

As coordenadas da área clicável são especificadas usando o atributo coords. O formato das coordenadas depende da forma que você escolher. Para áreas retangulares, você precisa fornecer as coordenadas dos cantos superior esquerdo e inferior direito (x1, y1, x2, y2). Para áreas circulares, você precisa fornecer as coordenadas do centro e o raio (centro-x, centro-y, raio). Para áreas poligonais, você precisa fornecer uma série de coordenadas para cada ponto do polígono (x1, y1, x2, y2, ..., xn, yn).

Para adicionar um link à área clicável, você usa o atributo href. O valor do atributo href deve ser a URL ou o link âncora para o qual você deseja navegar quando a área for clicada.

<map name="meuMapaDeImagem">
  <area shape="rect" coords="0,0,100,100" href="pagina1.html" alt="Área 1">
  <area shape="circle" coords="200,150,50" href="pagina2.html" alt="Área 2">
  <area shape="poly" coords="300,50,350,100,300,150" href="pagina3.html" alt="Área 3">
</map>

Neste exemplo, três áreas clicáveis são definidas: uma área retangular, uma área circular e uma área poligonal. Cada área tem suas próprias coordenadas e link.

Combinando o elemento <map>, o atributo usemap no elemento <img>, e os elementos <area>, você pode criar um mapa de imagem interativo que permite aos usuários clicar em diferentes regiões da imagem e navegar para diferentes páginas ou realizar ações específicas.

Retângulo (shape="rect")

Uma área clicável retangular é definida usando o atributo shape="rect". Para especificar as coordenadas de uma área retangular, você precisa fornecer os valores para coords na seguinte ordem: coords="x1,y1,x2,y2".

<map name="myImageMap">
  <area shape="rect" coords="50,50,200,150" href="rectangle.html" alt="Área Retangular">
</map>

Neste exemplo, uma área retangular é definida com o canto superior esquerdo nas coordenadas (50, 50) e o canto inferior direito nas coordenadas (200, 150). Quando clicada, ela navegará para a página rectangle.html.

Círculo (shape="circle")

Uma área clicável circular é definida usando o atributo shape="circle". Para especificar as coordenadas de uma área circular, você precisa fornecer os valores para coords na seguinte ordem: coords="centro-x,centro-y,raio".

<map name="myImageMap">
  <area shape="circle" coords="300,200,50" href="circle.html" alt="Área Circular">
</map>

Neste exemplo, uma área circular é definida com seu centro nas coordenadas (300, 200) e um raio de 50 pixels. Quando clicada, ela navegará para a página circle.html.

Polígono (shape="poly")

Uma área clicável poligonal é definida usando o atributo shape="poly". Para especificar as coordenadas de uma área poligonal, você precisa fornecer uma série de coordenadas x e y para cada ponto do polígono no atributo coords: coords="x1,y1,x2,y2,...,xn,yn".

<map name="myImageMap">
  <area shape="poly" coords="400,100,500,150,450,300,350,250" href="polygon.html" alt="Área Poligonal">
</map>

Neste exemplo, uma área poligonal é definida com quatro pontos: (400,100), (500,150), (450,300) e (350,250). Quando clicada, ela navegará para a página polygon.html.

Ao usar essas diferentes formas - retângulos, círculos e polígonos - você pode criar áreas clicáveis precisamente definidas em seu mapa de imagem. Isso permite oferecer uma experiência mais interativa e envolvente para seus usuários, permitindo que eles cliquem em regiões específicas da imagem para acessar conteúdo adicional ou realizar ações.