Pular para conteúdo

Imagem mapeada

A funcionalidade Imagem Mapeada permite transformar áreas específicas de uma imagem em links interativos, que direcionam o usuário para entidades dentro da plataforma ou para sites externos. Isso facilita o acesso a informações diretamente relacionadas à imagem exibida.

Por exemplo, em um projeto de asfaltamento de ruas, é possível incluir um infográfico com todas as etapas do cronograma, e cada etapa pode direcionar para uma entidade diferente dentro da plataforma.

Quando usar?

Utilize a Imagem Mapeada quando desejar:

  • Tornar imagens interativas com links internos ou externos;
  • Apresentar fluxogramas ou cronogramas com acesso rápido às entidades;
  • Criar painéis visuais com navegação direta.

Passo a passo para adicionar imagem mapeada

1. Acesse a entidade desejada

  • Clique sobre a entidade que deseja editar.
  • No menu superior, selecione Configuração de páginas.

Dica:
- Para aplicar a imagem apenas nesta entidade, clique em Configurar esta página.
- Para aplicar em todas as entidades de um mesmo nível (como projetos ou etapas), clique em Configuração geral de páginas.

2. Clone o template (se for a primeira edição)

  • Clique em Clonar template e depois em OK para liberar a edição da página.

3. Adicione o portlet de Imagem Mapeada

  • Clique em + Adicionar portlet.
  • Na categoria Mídias digitais, selecione Imagem Mapeada (ou utilize a barra de busca).
  • Clique em Adicionar.

4. Adicione a imagem

  • Clique no ícone de engrenagem do quadro recém-adicionado.
  • Clique em Adicionar imagem e selecione o arquivo no seu computador.
  • Escolha o modo de exibição: Ajustar à tela ou Manter tamanho original.

5. Mapeie áreas clicáveis

  • Clique em Adicionar hotspot.
  • Arraste para definir a área da imagem que será clicável.
  • Ajuste o tamanho da área conforme necessário.
  • Clique em Adicionar link:
  • Para links internos: selecione o tipo Entidade, pesquise e selecione a entidade desejada.
  • Para links externos: selecione o tipo URL e cole o endereço do site.
  • Repita o processo para quantos links forem necessários.

7. Finalize a configuração

  • Clique em Salvar.
  • Em seguida, clique em Publicar mudanças para aplicar à página.

Edição posterior

Você pode editar a imagem e os links a qualquer momento:

  • Clique no ícone de lápis no quadro da imagem mapeada.
  • Adicione, edite ou remova links conforme necessário.
  • Não se esqueça de clicar em Salvar após as alterações.

Observações importantes

  • Somente usuários com permissão de edição de páginas podem realizar essa configuração.
  • A imagem mapeada ficará visível na página da entidade, e ao clicar nos pontos interativos, o sistema abrirá os links em uma nova aba.