Como mapear Imagens com o Dreamweaver

BAIXE O DRAMWEAVER


VAMOS APRENDER POR ESTE TUTORIAL, A MAPEAR IMAGEM COM LINKS, OU SEJA DAR VARIOS LINKS EM UMA MESMA IMAGEM.

1. Introdução
Neste tutorial será ensinado como criar links em um site usando uma figura. Utilizaremos como exemplo um site fictício que se propõe a comentar serviços turísticos dos Estados da região sudeste do Brasil. Será usada uma imagem de um mapa-político desta região com pontos ativos em cada estado que serão links para os serviços de: Minas Gerais, Espírito Santo, São Paulo e Rio de Janeiro.










2. Iniciando o trabalho
Com o Macromedia Dreamweaver MX aberto e com o seu documento em edição, passe para o modo visual caso não esteja trabalhando dessa forma.





Clique no ícone Mostrar a visualização do projeto na barra de ferramenta Documento.

Uma imagem nova poderá ser inserida clicando no ícone Imagem no painel Inserir, guia Comuns.






3. Criando pontos ativos
Clique na imagem em que serão criados os pontos ativos: no exemplo deste tutorial a imagem ficará selecionada como aparece abaixo.





E o painel Inspetor de propriedades apresentará novas opções quando a imagem estiver selecionada.

Redimensionado em 98% (490 x 81) - Clique para ampliar

Dê um nome para seu mapa de imagem no campo Mapa: neste tutorial a denominação será sudeste. Clique no ícone Ferramenta Ponto ativo poligonal e determine a região ativa de sua imagem. No último ponto de sua seleção clique duas vezes para fechar o polígono.

Neste exemplo as seleções ficaram como mostrado abaixo:





Clicando em cada região em azul, o painel Inspetor de propriedades apresenta as seguintes opções:

Redimensionado em 98% (490 x 93) - Clique para ampliar

No campo Link, determine o caminho de seu link: digite a URL ou use o recurso Indicar o arquivo ou Procurar o arquivo.

Conforme suas necessidades preencha os campos Destino e Alt nesta etapa do trabalho.

Destino:

_blank - carrega o arquivo do link numa nova janela do navegador de Web
_parent - abre o vínculo do link no conjunto-pai de frames, substituindo o mesmo, no qual o link está inserido
_self - abre o documento na mesma frame do link, substituindo o conteúdo da mesma
_top - carrega o vínculo do link na janela atual do navegador de Web, substituindo todo o conteúdo

Você também poderá usar o nome de uma frame de seu site aqui.

Alt:
Digite uma palavra descritiva aqui para aparecer enquanto a imagem não é totalmente carregada no navegador de Web. Essa palavra também aparece quando o cursor do mouse fica parado sobre a imagem. 


4. Finalizando
No exemplo deste tutorial, o ponto ativo para o Estado do Rio de Janeiro poderia ter as seguintes atribuições:
Link: rio.html;
Destino: _blank;
Alt: Rio de Janeiro.





Salve o seu documento e verifique o resultado final no navegador de Web ...