imagemap para TYPO3

imagemap hace clicables las imágenes sin que los redactores tengan que tocar HTML, la opción correcta para planos de edificios, organigramas y gráficos de producto con varios hotspots

Algunos contenidos no pueden explicarse de forma tan eficiente con palabras como con una imagen en la que se pueden pulsar distintas áreas. Un plano de edificio en el que cada departamento lleva a la página del equipo correspondiente. Un organigrama con enlaces a los perfiles de persona. Una imagen de producto en la que un clic en la rueda, el motor o el puesto de conducción muestra los detalles técnicos correspondientes. HTML trae desde los años noventa la funcionalidad Image Map para eso, pero ningún redactor quiere teclear coordenadas a mano en un campo de texto. imagemap añade esa función en TYPO3 con un editor visual: los redactores hacen clic en el backend sobre la imagen, marcan un área y la enlazan a una página destino.

La promesa real de la extensión es unir orientación espacial y navegación. En lugar de hacer saltar a los visitantes entre una vista gráfica y una lista separada de enlaces, el propio gráfico se convierte en elemento de navegación. Para contenidos estructurados geográfica, jerárquica o técnicamente, eso ofrece un acceso claramente más intuitivo.

Escenarios típicos de uso

El primer caso son planos de situación y vistas generales de campus. Hospitales, universidades, recintos feriales y parques industriales trabajan con mapas de conjunto en los que edificios o áreas individuales enlazan directamente a páginas informativas. La alternativa clásica sería una lista con enlaces, pero pierde la referencia espacial. imagemap combina la orientación gráfica con la estructura de enlaces.

El segundo uso son los organigramas y las jerarquías. Una empresa muestra la estructura de sus departamentos como gráfico; cada nodo lleva al perfil del directivo correspondiente o a la página del departamento. Para la redacción es más fácil de mantener que un layout de tabla complejo con celdas enlazadas.

Tercer caso: gráficos de producto con hotspots de función. Productos técnicos (máquinas, vehículos, equipos) se muestran en un despiece o en un corte transversal, y sus componentes principales se explican por clic. Eso sustituye una lista larga de texto y lleva a los visitantes exactamente donde está su interés.

Arquitectura técnica

La extensión clásica imagemap para TYPO3 mantiene las coordenadas como registros estructurados en la base de datos y renderiza en el frontend un elemento HTML Map con las area tags correspondientes. En el backend hay un editor visual que muestra la imagen original como área de selección y permite a los redactores dibujar sobre ella rectángulos, círculos o polígonos. Cada área recibe una URL destino, un texto alternativo y, opcionalmente, un tooltip.

El reto técnico está en la responsividad. El HTML Map clásico trabaja con coordenadas absolutas en píxeles, que dejan de encajar con imágenes escaladas. Las extensiones imagemap lo resuelven mediante JavaScript que recalcula relativamente las coordenadas en el resize, o bien usando SVG como formato de salida. SVG es la solución limpia: las coordenadas vectoriales escalan de serie, el manejo de eventos y el estilado por CSS funcionan de forma nativa, y los lectores de pantalla pueden leer los elementos estructurados.

La integración se realiza mediante un elemento de contenido en el módulo Page. Los redactores eligen la imagen base en FAL, definen los hotspots y configuran opcionalmente ajustes globales como color estándar de las áreas, efectos hover y comportamiento de tooltip. La salida puede adaptarse mediante una plantilla Fluid en el sitepackage para garantizar la conformidad con la identidad corporativa.

Problemas frecuentes y soluciones

El primer problema es la accesibilidad. Las HTML Image Maps solo son legibles para lectores de pantalla si cada area tag tiene un texto alternativo significativo y la propia map se reconoce como navegación estructurada. Muchos redactores rellenan el alt text de manera descuidada o lo dejan vacío, lo que hace la map inutilizable para usuarios ciegos. Eso entra en conflicto con el Real Decreto 1112/2018 sobre accesibilidad de los sitios web del sector público. La solución es una obligación editorial de dotar a cada hotspot de un texto descriptivo y una comprobación técnica en el sitepackage que impida al guardar los textos vacíos.

Segundo problema: manejabilidad en móviles. Un hotspot que en tamaño desktop mide 30 por 30 píxeles es minúsculo en un smartphone. La solución pragmática es una alternativa móvil que, por debajo de un breakpoint determinado, sustituya la imagen por una lista con los mismos destinos. Eso requiere una lógica Fluid que sirva dos representaciones y conmute por CSS.

Tercer problema: carga de mantenimiento ante cambios de imagen. Si la imagen base (un plano o una foto de producto) se sustituye, todas las coordenadas deben volver a fijarse, porque los motivos se han desplazado. Solución pragmática: los redactores trabajan con un formato de imagen fijo y versionado y documentan la rejilla de coordenadas, de modo que las actualizaciones solo requieran correcciones mínimas. Alternativamente, una solución basada en SVG puede trabajar de forma relativa desde el principio.

Migración y compatibilidad de versiones

Para TYPO3 v11, v12 y v13 existen varias extensiones imagemap en mantenimiento activo, a menudo con nombres ligeramente distintos. En upgrades vale la pena revisar si la extensión utilizada originalmente sigue evolucionando o si tiene más sentido cambiar a una alternativa más moderna. Los enfoques basados en SVG desplazarán a medio plazo a los HTML Maps clásicos, porque funcionan mejor tanto en responsive como en accesibilidad.

Una indicación práctica para migraciones: si un proyecto existente contiene decenas de imagemaps, merece la pena un script que lea los registros de coordenadas existentes y los convierta en paths SVG. El cambio puede realizarse entonces en un único despliegue y la extensión puede retirarse. Eso reduce la deuda técnica y hace los gráficos a prueba de futuro.

Quien empieza hoy desde cero debería preferir el enfoque SVG, ya sea mediante una extensión con salida SVG o mediante un patrón propio en el sitepackage que ofrezca a los redactores un editor visual y entregue SVG en el frontend. Gosign implementa ambos caminos y asesora en la elección de la arquitectura adecuada para cada proyecto.