Hotspot para TYPO3

Imagens interativas explicam produtos complexos melhor que 1.000 palavras de texto

Uma planta de edifício com 12 salas marcadas, um corte transversal de máquina com 8 componentes descritos, um mapa da Europa com 15 localizações: todos esses casos de uso precisam de áreas clicáveis em uma imagem. O visitante clica em um componente e vê suas especificações. Clica em uma localização e vê endereço e contato. Extensões de hotspot para TYPO3 tornam imagens interativas ao vincular áreas definidas com tooltips, overlays ou links.

A questão mais interessante é se para isso é realmente necessária uma extensão. Hotspots baseados em SVG funcionam sem extensão, são mais leves, mais acessíveis e completamente controláveis no sitepackage. Para casos de uso simples, SVG é o melhor caminho. Para configurações complexas com muitos hotspots e manutenção via backend por editores, uma extensão justifica o uso.

Cenários típicos de uso

Imagens de produto com componentes clicáveis. Fabricantes de máquinas, equipamentos e produtos técnicos usam hotspots para descrever componentes em uma foto de produto. Um compressor industrial com 8 conjuntos: clique no motor mostra dados de potência, clique no filtro mostra intervalos de troca. Em vez de uma longa descrição textual, a informação se revela visualmente. Em um fabricante de máquinas, imagens de produto interativas aumentaram o tempo de permanência em páginas de produto em 45%.

Plantas de edifícios e campus. Universidades, clínicas e grandes empresas mostram mapas interativos: clicar em edifício, selecionar andar, ver informações da sala. TYPO3 fornece os dados de salas a partir de uma fonte de dados Extbase, os hotspots são posicionados na planta. Em um complexo hospitalar com 14 edifícios, mapas interativos substituíram completamente o guia de orientação impresso.

Infográficos com informações detalhadas. Departamentos de marketing produzem infográficos sobre processos, cadeias de valor ou estruturas corporativas. Em vez de mostrar um arquivo PNG estático, os elementos do infográfico se tornam clicáveis: clique em uma etapa do processo abre a descrição detalhada. Funciona especialmente bem com temas complexos que não podem ser explicados linearmente.

Arquitetura técnica

Extensões de hotspot no TYPO3 consistem em três partes: um editor backend para posicionamento dos hotspots, uma estrutura de dados para conteúdos de hotspot e um renderer frontend que exibe os hotspots sobre a imagem.

O editor backend é tipicamente um editor visual de posicionamento de pontos: o editor vê a imagem no backend TYPO3 e clica nos locais onde hotspots devem aparecer. As coordenadas são armazenadas como valores percentuais (relativos ao tamanho da imagem), não como pixels. Valores percentuais garantem que os hotspots permaneçam no lugar correto em exibição responsiva da imagem.

A estrutura de dados por hotspot: posição X (%), posição Y (%), texto de tooltip, conteúdo de detalhe (HTML/Fluid), tipo de ícone e opcionalmente um link para uma página de detalhe. Os dados são armazenados como relações inline (IRRE) ao elemento de conteúdo: um elemento de conteúdo tem 1:n hotspots.

No frontend, os hotspots são renderizados como elementos HTML absolutamente posicionados sobre a imagem. A imagem fica em um container com position: relative, os hotspots têm position: absolute com left e top em percentual. Ao clicar ou hover, o tooltip aparece como overlay, posicionado relativo ao hotspot.

A alternativa SVG funciona sem extensão: a imagem é criada como SVG (ou a imagem é incorporada como <image> em um SVG), os hotspots são elementos SVG (<circle>, <rect>, <polygon>) com atributos data- e event handlers. Os conteúdos de tooltip são lidos via JavaScript de um bloco <script type="application/json">.

Problemas frequentes e soluções

Posições de hotspot se deslocam em dispositivos móveis. A imagem é exibida menor no smartphone, mas os hotspots ficam na posição desktop. Causa: hotspots posicionados em pixels em vez de porcentagem, ou o container não tem redimensionamento responsivo. Solução: armazenar todas as posições em porcentagem e tornar o container responsivo com max-width: 100% e height: auto. Adicionalmente: em dispositivos móveis, exibir hotspots como lista abaixo da imagem, pois toques com o dedo em pequenos pontos de hotspot são difíceis.

Acessibilidade não garantida. Hotspots puramente visuais sem navegação por teclado e sem texto para leitor de tela não são acessíveis. Solução: implementar cada hotspot como <button> (não como <div>), com aria-label para o leitor de tela e tabindex para navegação por teclado. O conteúdo do tooltip deve ser vinculado como aria-describedby.

Performance com muitos hotspots. Mais de 20 hotspots em uma imagem criam mais de 20 elementos DOM com event listeners. Em dispositivos móveis antigos, isso pode causar engasgos. Solução: event delegation em vez de listeners individuais. Um único listener no container em vez de 20 nos hotspots. Com hotspots baseados em SVG, a performance é geralmente melhor, pois elementos SVG são renderizados nativamente pelo navegador.

Migração e compatibilidade de versões

Extensões de hotspot no TER suportam TYPO3 v10 e v11. Para v12 e v13 não existem extensões de hotspot amplamente mantidas. A tendência é para soluções baseadas em SVG implementadas como Custom Content Element no sitepackage, que não requerem extensão de terceiros.

A migração de uma extensão de hotspot para uma solução baseada em SVG requer: exportar os dados de hotspot (coordenadas, textos), criar um template SVG que renderiza os pontos como elementos SVG, e configurar um Custom Content Element que gerencia os dados via relação IRRE. O esforço é de 3 a 5 dias, dependendo do número de imagens com hotspot.

A solução mais à prova de futuro: hotspots baseados em CSS com <map> e <area> para cenários simples, SVG com JavaScript para interações complexas. A Gosign implementa imagens interativas como Custom Content Elements e orienta sobre a tecnologia adequada baseada na complexidade, requisitos de acessibilidade e número de imagens com hotspot.