Como crio um mapa de imagem HTML?

Quando um link é adicionado a uma imagem na HTML (Hypertext Markup Language), 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 determinadas áreas para onde o link irá, permitindo que ele incorpore vários links em uma imagem. Isso é feito especificando uma forma para o link e informando ao HTML quais coordenadas devem ser usadas para o link.

As imagens usadas para a Internet são medidas em pixels. Saber quantos pixels existem na imagem é o primeiro passo essencial para criar um mapa de imagem. 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 que o mapa de imagem HTML funcione corretamente.

O canto superior esquerdo é chamado 0,0 ao usar um mapa de imagem HTML. O canto inferior direito nesse caso seria 250.400. As medidas são feitas primeiro com a largura e depois a altura. Uma maneira fácil de pensar é que a primeira medida está informando o HTML a que distância está a direita da borda esquerda e a segunda é a quantidade de pixels a seguir. Se o programador quiser que um ponto no mapa seja 10 pixels da borda esquerda e 50 pixels abaixo, as coordenadas serão 10,50.

Existem três formas diferentes que o programador pode chamar para um mapa de imagem HTML: rect, circle e polygon. "Rect" significa retângulo, e o programador deve primeiro digitar as coordenadas do canto superior esquerdo e depois do canto inferior direito. Um círculo é especificado digitando as coordenadas onde o círculo começa e, em seguida, o raio do círculo. Um polígono é criado digitando todas as cinco coordenadas, de cima para a direita.

A codificação do mapa de imagem HTML é assim:
<nome do mapa = "teste">
<area href = "url.html" shape = cordas retas = "10,50,20,60">
<area href = "url.html" shape = circunferência do círculo = "10,50,4">
<area href = "url.html" shape = cordões de polígonos = "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 essa seção do mapa de imagem leva o usuário quando ele clica nele. Quando a imagem é colocada no site com HTML, o programador deve escrever: usemap = "test". Isso informará à imagem qual mapa de imagem HTML usar.