Uma alternativa é usar uma única imagem, ligando para várias páginas, indo uma ou outra maneira, dependendo da área onde você clicar. Este tipo de imagens que são chamados de mapas.
Para criar um mapa, devemos começar com uma imagem, e usar HTML para criar áreas de hotspots (ou pontos de acesso).
Para definir uma área retangular ativa, precisamos saber as coordenadas do seu canto superior esquerdo e no canto inferior direito do seu. Essas coordenadas que obtê-lo com qualquer programa gráfico.
A etiqueta cria um mapa é <MAP> </ MAP> contendo uma ou mais marcas <AREA /> com os dados de cada área.
Suponha que a primeira região ativa tem duas coordenadas (a1, b1) e (c1, d1) eo segundo lugar tem coordenadas (a2, b2) e (c2, d22), o código resultante seria a seguinte:
<MAP NAME="nome do mapa">
<AREA SHAPE="RECT" COORDS="a1,b1,c1,d1" HREF="URL destino1">
<AREA SHAPE="RECT" COORDS="a2,b2,c2,d2" HREF="URL destino2">
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<IMG SRC="URL_imagem" USEMAP="#nome do mapa"
WIDTH="largo" height="alto">
Na marca MAP, adicionar um atributo NOME para identificar a imagem do mapa. A área de rótulo, definimos o atributo HREF para o URL de destino, forma com a maneira que você terá e COORDS com as coordenadas da área.
Forma de área = nohref "DEFAULT" é um rótulo que define a área do mapa inteiro, indicando que seu caminho é o único com o padrão (retangular). Se você deseja que o mapa não cobre toda a imagem, ou mesmo ter uma forma diferente, isto deve-se notar aqui, em vez da instrução DEFAULT. Finalmente, nohref faz com que a área da imagem inteira excepto algumas áreas não activas, mas apenas definidos.
A marca IMG é semelhante aos utilizados anteriormente exceto que adiciona um novo atributo, indicando que USEMAP é o mapa definido acima com o nome.
Hot spots também podem ser definidas como círculos ou polígonos. Para uma circular, o atributo é SHAPE = "CIRCLE", e as coordenadas devem ser três, o seu centro (x, y) e seu raio (r):
<AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="URL do vinculo">
Para definir uma área poligonal deve usar o atributo SHAPE = "POLÍGONO" e conhecer as coordenadas dos pontos individuais (x1, y1) (x2, y2), (x3, y3), etc:
<AREA SHAPE="POLYGON" COORDS="x1,y1,x2,y2,x3,y3,..."
HREF="URL do vinculo">
