Saiba como usar mapas de imagem no Dreamweaver para criar pontos ativos interativos para o seu site.

Um mapa de imagem é uma imagem que foi dividida em regiões chamadas pontos ativos; quando o usuário clica em um ponto ativo, ocorre uma ação (por exemplo, um novo arquivo é aberto).

Os mapas de imagem do cliente armazenam as informações do link de hipertexto no documento HTML, não é um arquivo de mapa separado assim como fazem os mapas de imagem do servidor. Quando um visitante do site clica em um ponto ativo da imagem, o URL associado é enviado diretamente para o servidor. Desse modo, os mapas de imagem do cliente são mais rápidos do que os mapas de imagem do servidor porque o servidor não precisa interpretar onde o visitante clicou. 

O Dreamweaver não altera referências aos mapas de imagem do servidor nos documentos existentes; você pode usar mapas de imagem do cliente e do servidor no mesmo documento. No entanto, os navegadores compatíveis com os dois tipos de mapas de imagem dão prioridade aos mapas de imagem do cliente. Para incluir um mapa de imagem do servidor em um documento, você deve gravar o código HTML adequado.

Inserir mapas de imagem do cliente

Ao inserir um mapa de imagem do cliente, crie uma área de ponto ativo e defina um link que abra quando o usuário clicar na área do ponto ativo.

Observação:

Você pode criar várias áreas de ponto ativo, mas elas devem fazer parte do mesmo mapa de imagem.

  1. Na janela Documento, selecione a imagem.
  2. No Inspetor de propriedades, clique na seta de expansão, no canto inferior direito, para exibir todas as propriedades.
  3. No campo Mapa, insira um nome exclusivo para o mapa de imagem. Se estiver usando vários mapas de imagem no mesmo documento, verifique se cada mapa tem um nome exclusivo.

  4. Para definir as áreas do mapa de imagem, siga um destes procedimentos:
    • Selecione a ferramenta de círculo e arraste o ponteiro sobre a imagem para criar um ponto ativo circular.

    • Selecione a ferramenta de retângulo e arraste o ponteiro sobre a imagem para criar um ponto ativo retangular.

    • Selecione a ferramenta de polígono  e defina um ponto ativo de forma irregular clicando uma vez para cada ponto de canto. Clique na ferramenta seta para fechar a forma.

      Depois de criar o ponto ativo, o Inspetor de propriedades do ponto ativo é exibido.

  5. No campo Link, clique no ícone de pasta, navegue até o arquivo que deve ser aberto quando o usuário clicar no ponto ativo e selecione-o, ou digite o caminho.

  6. Na lista suspensa Destino, selecione a janela na qual o arquivo deve ser aberto ou digite o nome dele.

    Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se você especificar um quadro que não existe, a página vinculada será carregada em uma nova janela que tem o nome especificado. Você também pode selecionar um dos seguintes nomes de destino reservados:

    • _blank carrega o arquivo vinculado em uma nova janela do navegador não nomeada.
    • _parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contém o link. Se o quadro que contém o link não estiver aninhado, o arquivo vinculado será carregado na janela de navegador em tamanho integral.
    • _self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário especificá-lo.
    • _top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
    • _new carrega o arquivo vinculado em uma nova janela de navegador.

    Observação:

    A opção de destino só é disponibilizada quando o ponto ativo selecionado contém um link.  

  7. Na caixa Alt, digite o texto alternativo a ser exibido nos navegadores somente de texto ou nos navegadores que fazem download de imagens manualmente. Alguns navegadores exibem esse texto como uma dica de ferramenta quando o usuário passa o ponteiro pelo ponto ativo.
  8. Repita as etapas de 4 a 7 para definir pontos ativos adicionais no mapa de imagem.
  9. Quando terminar de mapear a imagem, clique em uma área em branco do documento para alterar o Inspetor de propriedades.

Modificar pontos ativos do mapa de imagem

Você pode editar com facilidade os pontos ativos criados em um mapa de imagem. Você pode mover uma área de ponto ativo, redimensionar pontos ativos ou mover um ponto ativo para frente ou para trás em um elemento absolutamente posicionado (elemento AP).

Você também pode copiar uma imagem com pontos ativos de um documento para outro ou copiar um ou mais pontos ativos de uma imagem e colá-los em outra imagem; os pontos ativos associados à imagem também são copiados no novo documento.

Selecionar vários pontos ativos em um mapa de imagem

  1. Use a ferramenta Ponto ativo de ponteiro para selecionar um ponto ativo.
  2. Siga um destes procedimentos:
    • Clique com a tecla Shift nos outros pontos ativos que deseja selecionar.

    • Pressione Control + A (Windows) ou Command + A (Macintosh) para selecionar todos os pontos ativos.

Mover um ponto ativo

  1. Use a ferramenta Ponto ativo de ponteiro para selecionar o ponto ativo.
  2. Siga um destes procedimentos:
    • Arraste o ponto ativo até uma nova área.

    • Use a tecla Control e as teclas de seta para mover um ponto ativo 10 pixels na direção selecionada.

    • Use as teclas de seta para mover um ponto ativo 1 pixel na direção selecionada.

Redimensionar um ponto ativo

  1. Use a ferramenta Ponto ativo de ponteiro para selecionar o ponto ativo.
  2. Arraste uma alça do seletor de ponto ativo para alterar o tamanho ou a forma do ponto ativo.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online