Hotspot para TYPO3

Las imágenes interactivas explican productos complejos mejor que 1.000 palabras de texto

Un plano de edificio con 12 estancias marcadas, un corte transversal de máquina con 8 componentes etiquetados, un mapa de Europa con 15 ubicaciones: todos estos casos de uso necesitan áreas clicables en una imagen. El visitante hace clic en un componente y ve sus especificaciones. Las extensiones Hotspot para TYPO3 hacen las imágenes interactivas vinculando áreas definidas con tooltips, overlays o enlaces.

La pregunta más interesante es si realmente se necesita una extensión para esto. Los hotspots basados en SVG funcionan sin extensión, son más ligeros, más accesibles y completamente controlables en el sitepackage. Para casos de uso sencillos, SVG es el mejor camino. Para configuraciones complejas con muchos hotspots y mantenimiento en backend por redactores, una extensión justifica su uso.

Escenarios de uso habituales

Imágenes de producto con componentes clicables. Fabricantes de máquinas, equipos y productos técnicos usan hotspots para etiquetar componentes en una foto de producto. En un fabricante de maquinaria, las imágenes de producto interactivas aumentaron el tiempo de permanencia en páginas de producto un 45%.

Planos de edificios y campus. Universidades, clínicas y grandes empresas muestran planos interactivos: clic en un edificio, seleccionar planta, ver información de la sala.

Infografías con información detallada. Los departamentos de marketing producen infografías sobre procesos, cadenas de valor o estructuras empresariales. En lugar de mostrar un archivo PNG estático, los elementos de la infografía se hacen clicables.

Arquitectura técnica

Las extensiones Hotspot en TYPO3 constan de tres partes: un editor de backend para posicionar los hotspots, una estructura de datos para contenidos de hotspot y un renderizador frontend.

El editor de backend es típicamente un editor visual de colocación de puntos: el redactor ve la imagen en el backend TYPO3 y hace clic en los lugares donde deben aparecer los hotspots. Las coordenadas se almacenan como valores porcentuales (relativos al tamaño de la imagen), no como píxeles.

En el frontend, los hotspots se renderizan como elementos HTML posicionados absolutamente sobre la imagen. La imagen está en un contenedor con position: relative, los hotspots tienen position: absolute con left y top en porcentaje.

La alternativa SVG funciona sin extensión: la imagen se crea como SVG, los hotspots son elementos SVG (<circle>, <rect>) con atributos data- y manejadores de eventos.

Problemas frecuentes y soluciones

Las posiciones de hotspot se desplazan en dispositivos móviles. La imagen se muestra más pequeña en smartphone, pero los hotspots permanecen en la posición de escritorio. Solución: almacenar todas las posiciones en porcentaje y hacer el contenedor responsive. Adicionalmente: mostrar los hotspots en móviles como lista debajo de la imagen.

Accesibilidad no garantizada. Hotspots puramente visuales sin navegación por teclado ni texto para lectores de pantalla no son accesibles. Solución: implementar cada hotspot como <button> con aria-label para el lector de pantalla y tabindex para la navegación por teclado.

Rendimiento con muchos hotspots. Más de 20 hotspots en una imagen generan más de 20 elementos DOM con event listeners. Solución: Event Delegation en lugar de listeners individuales. Un único listener en el contenedor en lugar de 20 en los hotspots.

Migración y compatibilidad de versiones

Las extensiones Hotspot en el TER soportan TYPO3 v10 y v11. Para v12 y v13 no existen extensiones Hotspot ampliamente mantenidas. La tendencia va hacia soluciones basadas en SVG implementadas como Custom Content Element en el sitepackage.

La migración de una extensión Hotspot a una solución basada en SVG requiere: exportar los datos de hotspot (coordenadas, textos), crear una plantilla SVG y configurar un Custom Content Element. El esfuerzo es de 3-5 días.

La solución más segura para el futuro: hotspots basados en CSS con <map> y <area> para escenarios sencillos, SVG con JavaScript para interacciones complejas. Gosign implementa imágenes interactivas como Custom Content Elements y asesora sobre la tecnología adecuada según complejidad, requisitos de accesibilidad y número de imágenes con hotspot.