Como faço para criar um mapa de imagem HTML?

Quando um link é adicionado a uma imagem no Hypertext Markup Language (HTML), esse link é adicionado à imagem inteira. Isso pode ser um problema se o programador quiser criar uma única imagem com várias áreas ou botões e cada área for usada para um link diferente. Um mapa de imagem HTML permite que o programador especifique certas áreas onde o link será, permitindo que ele incorpore vários links em uma imagem. Isso é feito especificando uma forma para o link e dizendo ao HTML quais coordenadas devem ser usadas para o link.

As imagens usadas para a Internet são medidas em pixels. Saber quantos pixels estão na imagem é a primeira etapa essencial para criar um mapa de imagens. Por exemplo, uma imagem retangular está sendo usada com uma altura de 400 pixels e uma largura de 250 pixels. Em seguida, o programador precisa saber como medir com precisão a forma em coordenadas para o mapa de imagem HTML funcionar corretamente.

tO canto superior esquerdo é chamado 0,0 ao usar um mapa de imagem HTML. O canto inferior direito neste caso seria 250.400. As medições são feitas com a largura primeiro e depois a altura. Uma maneira fácil de pensar é que a primeira medição está dizendo ao HTML a que distância a direita de ir da borda esquerda e a segunda é como dizer quantos pixels para baixo. Se o programador quiser que um ponto no mapa seja de 10 pixels da borda esquerda e 50 pixels para baixo, as coordenadas seriam 10,50.

Existem três formas diferentes que o programador pode invocar para um mapa de imagem HTML: Rect, Circle e Polygon. "Rect" significa retângulo, e o programador precisa primeiro digitar as coordenadas para o canto superior esquerdo e depois para o canto inferior direito. Um círculo é especificado digitando as coordenadas onde o círculo começa e depois o raio do círculo. Um polígono é criado digitando todas as cinco coordenadas, da parte superior à direita.

html mapa de imagem codificação é assim:

<área href = "url.html" shape = rect coords = "10,50,20,60">
<área href = "url.html" forma = círculo coords = "10,50,4">
<área href = "url.html" forma = polygon coords = "10,50,12,55,15,60,13,65,8,55">

Cada mapa de imagem HTML deve ter um nome, e a seção "url.html" é o link em que a seção do mapa da imagem liderará um usuário quando ele ou ela clicar nele. Quando a imagem é colocada no site com HTML, o programador deve escrever: useemap = "teste". Isso dirá à imagem qual mapa de imagem html usar.