1
O primeiro passo, tendo já definido o que você vai fazer com um 'image map', será providenciar a "imagem" que será utilizada como base. Em nosso exercício utilizaremos como modelo, para seu conforto, a barra de navegação que se encontra na parte inferior desta página. Ei-la, como se apresenta visualmente para você, em seu Browser.

2
Essa barra parece, à primeira vista, simplesmente um texto, dentro de uma célula de tabela sem bordas visíveis. Parece... mas não é! Trata-se de uma imagem retangular, com vários ítens de texto graficamente tratado (no PSP, neste caso) com sombreado e fonte específica. Essa imagem foi produzida para ser utilizada como barra de navegação em praticamente todas as páginas do meu site, com pequenas mudanças de cor e textura de fundo - e cada um de seus ítens de texto, carrega um link específico.

3
Após as ações para criar um 'image map' sobre ela, sua aparência, apenas para você que a está editando, será essa logo abaixo:

já transformada em um 'image map'

4
Note que a imagem apresenta vários retângulos azulados sobre os elementos do texto que irão carregar os respectivos links. Esses retângulos têm um nome de identificação, e agregado a eles, seu respectivo link. Veja no gráfico abaixo, um exemplo de como isso se apresenta na paleta "Properties" de seu programa:

aqui com o retângulo "Textos" selecionado

e aqui, em "Properties", com o link e o nome de identificação definidos

5
Mas afinal, como faço um 'image map'? Abra seu Dreamweaver4 e, estando no modo de visualização "Design", abra a imagem que vai carregar o 'image map'. Selecione a imagem, clicando sobre ela: sua paleta "Properties" (se não estiver visível pressione as teclas CTRL+F3) vai apresentar os ítens disponíveis, relativos à essa imagem, entre eles o conjunto necessário para a criação do 'image map'. Veja o gráfico:

no canto inferior esquerdo o campo "Map" (para definição do nome) e abaixo as ferramentas de desenho (as Hotspot tools) que serão utilizadas para traçar o mapa dentro da imagem, pela ordem: retangular, oval e polygon (desenho irregular).

6
Para o nosso exercício utilizaremos a "Retangular Hostspot tool". Clique sobre ela (o ponteiro do mouse tomará o formato de uma cruz) e, na imagem escolhida para o exercício, clique no ponto desejado para começar a desenhar o retângulo, e mantendo o mouse pressionado enquanto desenha, arraste o ponteiro para a direita e para baixo, até definir um retângulo sobre aquela parte da imagem. Veja um exemplo disso em andamento:

repare no canto superior esquerdo o retângulo (com linhas azuis) sendo desenhado, com ponteiro do mouse em formato de cruz. Ao soltar o botão do mouse, seu retângulo estará preenchido, e sua paleta "Properties" apresentará os campos necessários para completar a criação de seu "image map"

7
Confira nos gráficos abaixo o resultado das ações acima descritas, e como refletiu na paleta "Properties".

o retângulo já está pronto (e automaticamente selecionado) - note ao lado da imagem o objeto amarelo que se auto inseriu naquele local - é ele que indica que na imagem ao lado, você tem um "mapa", ou um "ponto quente"

na paleta "Properties" preencha os campos com o que se relaciona a este ítem do "image map" (ao final, serão vários ítens dentro de um mesmo 'mapa'), tais quais: qual link ele vai acionar, qual o "Target" para ele, qual o texto em "Alt" e qual o nome pelo qual o seu mapa será identificado, em "Map" (esse nome será comum à todos os outros ítens do mapa)

8
Repita os passos 5,6 e 7 para cada um dos ítens que quiser traçar para compor o seu mapa. Ao final você terá uma imagem muito semelhante ao gráfico do ítem "3" deste tutorial, com todos os ítens definidos e devidamente linkados. Suas ações irão gerar modificações no código de sua página. Veja um exemplo disso:

9
Se você analisar bem esse código, verá que o seu 'image map' está ali descrito como uma imagem retangular ("area shape="rect") situada nas coordenadas ali apresentadas ("coords="35,0,83,22"). Se você trocar a imagem gif sobre a qual o desenhou, por outra imagem com as mesmas dimensões, o seu "mapa" funcionará da mesma forma, ou seja: seguindo as mesmas coordenadas, ao se clicar naquele local o mesmo link será acionado, não importando se a sua imagem gif esteja mostrando um texto, ou uma nuvem.

Viu como é simples? Com alguns cliques você criou algo tão sofisticado, não é? Aplausos para o Dream4... Faça o exercício com cuidado e prazer, enquanto aguarda o próximo tutorial.

Divirta-se!

Guacira Sampaio Rocha direitos reservados