imagemap for TYPO3

imagemap makes images clickable without requiring editors to touch HTML, the right choice for floor plans, org charts and product graphics with several hotspots

Some content cannot be explained as efficiently through words as through an image with clickable areas. A building plan in which every department leads to the corresponding team page. An org chart with links to individual person profiles. A product image where a click on the wheel, the engine or the cockpit shows the relevant technical details. HTML has offered image map functionality since the 1990s, but no editor wants to type coordinates by hand into a text field. imagemap retrofits this functionality in TYPO3 with a visual editor: editors click on the image in the backend, mark an area and link it to a target page.

The actual promise of the extension is that spatial orientation and navigation are merged. Instead of forcing visitors to jump between a graphic view and a separate link list, the graphic itself becomes the navigation element. For content that is structured geographically, hierarchically or technically, this offers a significantly more intuitive entry point.

Typical use cases

The first case are site plans and campus overviews. Hospitals, universities, exhibition grounds and industrial parks work with overview maps where individual buildings or areas link directly to information pages. The classic alternative would be a list with links, but that loses the spatial reference. imagemap combines graphic orientation with the link structure.

The second use case are org charts and hierarchies. A company shows the structure of its departments as a graphic, and every node leads to the profile of the respective executive or the department page. For the editorial team this is easier to maintain than a complex table layout with linked cells.

Third case: product graphics with feature hotspots. Technical products, machines, vehicles, devices, are shown on an exploded view or a cross-section where the most important components are explained on click. This replaces a long text list and takes visitors directly to where their interest lies.

Technical architecture

The classic imagemap extension for TYPO3 maintains the coordinates as structured records in the database and renders an HTML map element with the matching area tags in the frontend. In the backend, a visual editor is available that displays the original image as a selection area and allows editors to draw rectangles, circles or polygons on it. Each area receives a target URL, alternative text and, optionally, a tooltip.

The technical challenge lies in responsiveness. The classic HTML map works with absolute pixel coordinates that no longer fit when images are scaled. imagemap extensions solve this with JavaScript that recomputes the coordinates relatively on resize or by using SVG as the output format. SVG is the cleanest solution here: vector coordinates scale natively, event handling and styling via CSS work out of the box, and screen readers can read the structured elements.

Integration happens through a content element in the page module. Editors pick the source image from FAL, define the hotspots and optionally configure global settings such as default area colour, hover effects and tooltip behaviour. The output can be adjusted through a Fluid template in the sitepackage to maintain corporate design compliance.

Common problems and solutions

The first problem is accessibility. HTML image maps are only sensibly readable for screen readers if every area tag has a meaningful alternative text and the map itself is recognised as structured navigation. Many editors fill the alt text carelessly or leave it blank, which makes the map useless for blind users. The solution is an editorial rule that every hotspot has to carry a descriptive alt text, and a technical check in the sitepackage that prevents empty texts on save.

Second problem: mobile usability. A hotspot that measures 30 by 30 pixels on desktop is tiny on a smartphone. The pragmatic solution is a mobile alternative that below a certain breakpoint replaces the image with a list of the same targets. This requires a Fluid logic that renders two variants and switches between them via CSS.

Third problem: maintenance effort when the image changes. If the base image (for example a site plan or product photo) is replaced, all coordinates have to be set again because the subjects have shifted. Pragmatic solution: editors work with a fixed, versioned image format and document the coordinate grids, so that only minimal corrections are needed on updates. Alternatively, an SVG-based solution can work with relative coordinates from the start.

Migration and version compatibility

For TYPO3 v11, v12 and v13 there are several imagemap extensions that are actively maintained, often under slightly different names. On upgrades it is worth looking whether the originally used extension is still being developed or whether switching to a more modern alternative makes more sense. SVG-based approaches will displace classic HTML maps in the medium term because they perform better on responsiveness and accessibility.

A practical note for migrations: if an existing project contains dozens of image maps, it pays off to write a script that reads the existing coordinate records and converts them into SVG paths. The switch can then happen in a single deployment and the extension can be switched off. This reduces technical debt and makes the graphics future-proof.

Anyone starting fresh today should prefer the SVG approach, either through an extension with SVG output or through a sitepackage pattern that offers editors a visual editor and emits SVG in the frontend. Gosign implements both paths and advises on the right architecture for the given project.