Mapeando imagens

Mapeando imagens com o Microsoft FrontPage 2002

Neste tutorial pretendemos mostrar como criar vários links para diferentes partes de um site usando uma imagem, através de uma ferramenta do Microsoft Front Page 2000 e posteriores.

Maiores informações sobre o programa podem ser obtidas em http://www.microsoft.com/brasil/produtos/display.asp?p=15.

Teremos como exemplo um pequeno mapa da Região Sudeste de nosso país, onde deveremos criar uma divisão entre os 4 estados (Rio de Janeiro, Espírito Santo, Minas Gerais e São Paulo) e então inserir links para diferentes destinos (páginas dentro do próprio site, outros sites, imagens, etc). Digamos que queremos fazer um site sobre notícias dos 4 estados da região. Então faremos um link em cada divisão da imagem para uma página com o conteúdo referente àquele estado.

Estando a trabalhar no Front Page, basta então habilitar a barra de ferramentas com as funções que precisaremos usar neste tutorial. Ela é a barra Figuras, que pode ser acessada no menu Exibir > Barras de ferramentas > Figuras.

Quando então clicarmos em uma figura qualquer no nosso projeto, surgirá a barra acima. Os botões envolvidos pela marcação em vermelho serão os usados. Com o botão em formato de seta faremos a seleção da figura a ser mapeada.

Com os botões em formas geométricas (retângulo, círculo e polígono) faremos a marcação dos pontos ativos (que são exatamente as regiões de divisão da imagem). Com o botão de seta e um pequeno retângulo azul podemos realçar tais pontos ativos.

Deveremos então clicar no botão de forma que desejamos usar e fazer a divisão da imagem. Como o mapa é de forma irregular, usaremos no exemplo o botão Ponto de acesso em forma de polígono.

Após clicarmos nele, iremos na imagem e escolheremos um vértice qualquer do "estado" para o qual queremos criar um ponto de acesso e percorreremos com o mouse todos os outros vértices, sempre clicando em cada um, para que então seja criado um vértice também no mapeamento.

Após criarmos o ponto de acesso para os estados do Rio de Janeiro e São Paulo, o resultado é o seguinte:

Bem, na figura acima vemos a marcação que foi feita por cima do mapa original. Vamos ver então somente a marcação do mapa para links:

Para inserirmos os links para cada estado devemos dar um duplo clique na região desejada. Será então aberta a seguinte janela:

No campo de endereço deveremos colocar o caminho que queremos que seja aberto. Podemos criar uma Dica de tela usando o botão de mesmo nome, para que um texto seja exibido quando o cursor do mouse é passado sobre esta área da imagem. No botão Quadro de destino... podemos escolher como será a abertura deste link (podemos definir que seja aberta uma nova janela, escolher um frame da página, abrir no lugar da página atual, etc).

Se quisermos inserir um link único para todo o resto da imagem, de forma que ao clicarmos foras dos mapas do Rio de Janeiro e de São Paulo também seja aberta uma nova página, basta repetirmos a operação acima, efetuando o duplo-clique em qualquer área não mapeada.

Para finalizar, vamos ver como ficaria nosso mapa ao passarmos com o ponteiro do mouse sobre o estado do Rio de Janeiro:

Como este exemplo foi criado a partir da primeira imagem do tutorial, ainda é possível ver o resultado do mapeamento que foi feito. Temos um link específico para os estados do Rio e de São Paulo, e um link único para todo o resto da imagem, que teoricamente abriria uma página com informações sobre Minas Gerais e Espírito Santo. Só não tente clicar na imagem, pois nada será aberto (é apenas um exemplo, lembrem-se ).