Hotspot for TYPO3

Interactive images explain complex products better than 1,000 words of text

A building plan with 12 marked rooms, a machine cross-section with 8 labeled components, a map of Europe with 15 locations: all of these need clickable areas on an image. The visitor clicks a component and sees its specifications, clicks a location and sees its address and contact details. Hotspot extensions for TYPO3 make images interactive by linking defined areas to tooltips, overlays or links.

The more interesting question is whether you need an extension for this at all. SVG-based hotspots work without one, are lighter, more accessible and fully under your control in the sitepackage. For simple use cases, SVG is the better route. For complex setups with many hotspots that editors maintain in the backend, an extension earns its place.

Typical use cases

Product images with clickable components. Manufacturers of machinery, equipment and technical products use hotspots to label the components on a product photo. Take an industrial compressor with 8 assemblies: clicking the motor shows its performance data, clicking the filter shows the replacement intervals. Instead of a long text description, the information opens up visually. For one machinery manufacturer, interactive product images increased time on product pages by 45%.

Building and campus maps. Universities, hospitals and large companies publish interactive site maps: click a building, choose a floor, see the room information. TYPO3 supplies the room data from an Extbase data source, and the hotspots sit on the floor plan. At a hospital with 14 buildings, interactive maps replaced the printed wayfinding guide entirely.

Infographics with detailed information. Marketing teams produce infographics on processes, value chains or corporate structures. Instead of showing a static PNG file, the elements of the infographic become clickable: clicking a process stage opens its detailed description. This works especially well for complex topics that can’t be explained in a straight line.

Technical architecture

Hotspot extensions in TYPO3 consist of three parts: a backend editor for positioning the hotspots, a data structure for the hotspot content and a frontend renderer that displays the hotspots on the image.

The backend editor is typically a visual point-placement editor: the editor sees the image in the TYPO3 backend and clicks the spots where hotspots should appear. The coordinates are stored as percentages (relative to the image size), not as pixels. Percentages ensure the hotspots stay in the right place when the image is displayed responsively.

The data structure per hotspot: X position (%), Y position (%), tooltip text, detail content (HTML/Fluid), icon type and, optionally, a link to a detail page. The data is stored as inline relations (IRRE) to the content element, so one content element has 1:n hotspots.

In the frontend, the hotspots are rendered as absolutely positioned HTML elements on top of the image. The image sits in a container with position: relative, and the hotspots have position: absolute with left and top in percent. On click or hover, the tooltip appears as an overlay positioned relative to the hotspot.

The SVG alternative works without an extension: the image is created as an SVG (or embedded in an SVG as an <image>), and the hotspots are SVG elements (<circle>, <rect>, <polygon>) with data- attributes and event handlers. JavaScript reads the tooltip content from a <script type="application/json"> block.

Common problems and solutions

Hotspot positions shift on mobile devices. The image is displayed smaller on a smartphone, but the hotspots stay at their desktop positions. The cause: the hotspots are positioned in pixels instead of percent, or the container doesn’t resize responsively. Solution: store all positions in percent and make the container responsive with max-width: 100% and height: auto. In addition, show the hotspots on mobile devices as a list below the image, because tapping small hotspot dots with a finger is difficult.

No accessibility. Purely visual hotspots without keyboard navigation and without screen reader text are not accessible. Solution: implement every hotspot as a <button> (not a <div>), with an aria-label for screen readers and a tabindex for keyboard navigation. The tooltip content has to be linked via aria-describedby.

Performance with many hotspots. 20+ hotspots on one image create 20+ DOM elements with event listeners, which can make older mobile devices stutter. Solution: event delegation instead of individual listeners, meaning one listener on the container instead of 20 on the hotspots. SVG-based hotspots generally perform better, because the browser renders SVG elements natively.

Migration and version compatibility

Hotspot extensions in the TER support TYPO3 v10 and v11. For v12 and v13, there are no widely maintained hotspot extensions. The trend is toward SVG-based solutions that are implemented as a custom content element in the sitepackage and need no third-party extension.

Migrating from a hotspot extension to an SVG-based solution involves exporting the hotspot data (coordinates, texts), creating an SVG template that renders the points as SVG elements, and setting up a custom content element that manages the data through an IRRE relation. The effort is 3-5 days, depending on the number of hotspot images.

The most future-proof approach: image maps with <map> and <area> for simple scenarios, SVG with JavaScript for complex interactions. Gosign implements interactive images as custom content elements and advises on the right technology based on complexity, accessibility requirements and the number of hotspot images.