imagemap para TYPO3

imagemap torna imagens clicáveis sem que redatores precisem tocar em HTML, a escolha certa para plantas de edifício, organogramas e gráficos de produto com vários hotspots

Alguns conteúdos não podem ser explicados tão eficientemente com palavras quanto com uma imagem na qual áreas diferentes podem ser clicadas. Uma planta de edifício em que cada departamento leva à página da equipe correspondente. Um organograma com links para os perfis individuais. Uma imagem de produto na qual um clique na roda, no motor ou no cockpit mostra detalhes técnicos. O HTML oferece desde os anos 90 a funcionalidade Image Map, mas nenhum redator quer digitar coordenadas à mão em um campo de texto. O imagemap adiciona essa função ao TYPO3 com um editor visual: redatores clicam no backend sobre a imagem, marcam uma área e a linkam a uma página de destino.

A promessa real da extensão é que orientação espacial e navegação sejam unificadas. Em vez de fazer visitantes pularem entre uma visão gráfica e uma lista de links separada, o próprio gráfico vira elemento de navegação. Para conteúdos estruturados geográfica, hierárquica ou tecnicamente, isso oferece um acesso significativamente mais intuitivo.

Cenários típicos de uso

O primeiro caso são mapas de localização e panoramas de campus. Hospitais, universidades brasileiras, parques de exposições e parques industriais trabalham com mapas panorâmicos nos quais edifícios ou áreas individuais linkam diretamente para páginas de informação. A alternativa clássica seria uma lista com links, que no entanto perde a referência espacial. O imagemap combina a orientação gráfica com a estrutura de links.

O segundo caso de uso são organogramas e hierarquias. Uma empresa mostra a estrutura de seus departamentos como gráfico, cada nó leva ao perfil da respectiva pessoa ou à página do departamento. Para a redação, isso é mais fácil de manter do que um layout complexo de tabelas com células linkadas.

Terceiro caso: gráficos de produto com feature hotspots. Produtos técnicos, máquinas, veículos, equipamentos, são apresentados em desenho explodido ou corte em que os principais componentes são explicados via clique. Isso substitui uma longa lista de texto e leva os visitantes exatamente para onde está o seu interesse.

Arquitetura técnica

A extensão imagemap clássica para TYPO3 mantém as coordenadas como registros estruturados no banco e renderiza no frontend um elemento HTML map com as respectivas tags area. No backend há um editor visual que mostra a imagem original como área de seleção e permite aos redatores desenhar retângulos, círculos ou polígonos. Cada área recebe um URL de destino, um texto alternativo e, opcionalmente, um tooltip.

O desafio técnico está na responsividade. O HTML map clássico trabalha com coordenadas absolutas em pixels, que não funcionam em imagens escaladas. Extensões imagemap resolvem isso via JavaScript que recalcula as coordenadas relativas no resize, ou usando SVG como formato de saída. O SVG é a solução limpa: coordenadas vetoriais escalam naturalmente, tratamento de eventos e styling via CSS funcionam nativamente, e leitores de tela conseguem ler os elementos estruturados.

A integração acontece via content element no módulo de página. Redatores escolhem a imagem base do FAL, definem os hotspots e configuram opcionalmente opções globais como cor padrão das áreas, efeitos de hover e comportamento de tooltip. A saída pode ser ajustada via template Fluid no site package para garantir conformidade com a identidade visual.

Problemas frequentes e soluções

O primeiro problema é acessibilidade. Image maps HTML só são realmente legíveis para leitores de tela se cada tag area tiver um texto alternativo significativo e o próprio map for reconhecido como navegação estruturada. Muitos redatores preenchem o alt text sem pensar ou deixam vazio, o que torna o map inútil para usuários cegos. A solução é uma obrigação editorial de dar a cada hotspot um alt text descritivo, e uma verificação técnica no site package que impeça textos vazios no salvamento.

Segundo problema: usabilidade mobile. Um hotspot que mede 30 por 30 pixels em tamanho desktop fica minúsculo em um smartphone. A solução pragmática é uma alternativa mobile que, abaixo de um certo breakpoint, substitui a imagem por uma lista com os mesmos destinos. Isso exige uma lógica Fluid que entrega duas apresentações e alterna via CSS.

Terceiro problema: esforço de manutenção em mudanças de imagem. Quando a imagem base, um mapa de localização ou foto de produto, é trocada, todas as coordenadas precisam ser redefinidas, porque os motivos se deslocaram. Solução pragmática: redatores trabalham com um formato de imagem fixo, versionado, e documentam a grade de coordenadas para que em updates apenas correções mínimas sejam necessárias. Alternativamente, uma solução baseada em SVG pode trabalhar de forma relativa desde o início.

Migração e compatibilidade de versões

Para TYPO3 v11, v12 e v13 existem várias extensões imagemap mantidas ativamente, frequentemente com nomes levemente diferentes. Em upgrades, vale verificar se a extensão originalmente usada ainda é desenvolvida ou se uma troca para uma alternativa mais moderna faz mais sentido. Abordagens baseadas em SVG vão substituir a médio prazo os HTML maps clássicos, porque funcionam melhor tanto em responsividade quanto em acessibilidade.

Uma dica prática para migrações: se um projeto existente contém dezenas de imagemaps, vale um script que lê os registros de coordenadas existentes e os converte em paths SVG. A mudança pode então acontecer em um único deployment e a extensão ser desligada. Isso reduz a dívida técnica e torna os gráficos preparados para o futuro.

Quem começa hoje deve preferir a abordagem SVG, seja via extensão com saída SVG, seja via um padrão próprio no site package que ofereça aos redatores um editor visual e no frontend entregue SVG. A Gosign implementa os dois caminhos e orienta na escolha da arquitetura adequada ao projeto em questão.