How to make an image clickable in Confluence Cloud

There are two different questions hiding behind this one, and they have completely different answers. One takes two clicks. The other cannot be done with anything Confluence ships with, and the workaround most people reach for is the one that will cost them an afternoon in six months.

Short answer. To make the whole image a link: click the image in the editor, click the link icon in the floating toolbar, type a URL or search for a Confluence page, press Enter. Done. To make different parts of one image point at different places: Confluence Cloud cannot do it. That is an image map, image maps are built from HTML, and Cloud has no HTML macro. Your real choices are an app that draws hotspots over the picture, or a vector diagram that carries its own links.

Case one: the whole picture is one link

This is built in and takes seconds.

1. Click the image on the page in the editor. A small floating toolbar appears above it.
2. Click the link icon in that toolbar.
3. Type a URL, or start typing the name of a Confluence page and pick it from the dropdown.
4. Press Enter and publish.

Good for a logo that leads to a space, a screenshot that opens the tool it shows, a cover image that opens the document. If this is what you needed, you are finished.

Case two: different areas, different destinations

This is what people usually mean by an interactive picture: an architecture diagram where each box opens the runbook for that service, a floor plan where each room opens its own page, a process chart where every step links to its instruction.

On the open web this is an image map: an <img> tag with <map> and <area> elements marking out rectangles and polygons. In Confluence Data Center you could paste that into the HTML macro and be done. In Confluence Cloud the HTML macro does not exist, and raw markup is not rendered on a page. So the classic answer is simply unavailable, and no amount of searching will produce a setting that turns it on.

That leaves three real paths.

Slicing the picture into a table

The free workaround: cut the image into pieces in a graphics editor, upload each piece, put them in a borderless table, link each cell separately.

It works. It is also the option that quietly costs the most. Each slice is a separate attachment, so a change to the diagram means re-cutting and re-uploading every piece. Table cells introduce gaps and the picture stops looking like one picture. Column widths behave differently on a laptop and on a wide monitor, so the slices drift apart for some readers and overlap for others. And the next person to edit the page has no idea why the diagram is a table.

Reasonable for a picture that will never change again. A trap for anything that gets edited.

An app that draws hotspots

There are Marketplace apps built exactly for this, and they are the right answer for photographs and raster images. Scroll ImageMap from K15t gives you a graphical editor for drawing circles, rectangles and polygons over an image and pointing each at a page or URL. Smart Images does the same kind of job with rectangles, circles and polygons.

If your picture is a photo of a machine, a scanned floor plan or a rendered mock-up, this is what you want: there is nothing inside the file to work with, so somebody has to mark out the areas by hand, and these apps make that part pleasant.

A diagram that already knows where its links go

There is a case where drawing hotspots by hand is wasted work: when the picture is a diagram, and the links are already in it.

Draw.io, Visio and Mermaid all let you attach a link to a shape. Export that diagram as SVG and the links travel with the file, because SVG is markup rather than pixels. Then you upload it to Confluence and they stop working, because Confluence renders an uploaded SVG as a flat image. The information is in the file; the viewer just will not use it.

The annoying part is that this is the case where hand-drawn hotspots are pure duplication: you would be marking out, one by one, the areas the diagram already describes. And then doing it again after every edit, because the boxes have moved.

Disclosure: I build an app for this one. Clickable SVG renders the SVG as live markup instead of a flat picture, so the links your diagram already carries keep working: click a box, open the page behind it. Nothing leaves your site, and re-exporting an edited diagram does not mean redrawing anything. It does not help with photographs, where there are no shapes to read — that is what the hotspot apps above are for.

And if your case is the simple one, use what is already there. One link on the whole image is free, built in, and takes two clicks.

Which one fits your picture

• Logo, screenshot, cover image, one destination — the built-in image link. Nothing to install.
• Photo or scan, several areas, never changes — a hotspot app, or slicing if you are determined to spend nothing.
• Diagram from draw.io, Visio or Mermaid with links on the shapes — keep the diagram vector and render it live, rather than redrawing its structure as hotspots.
• Diagram that gets edited every month — anything hand-maintained will lose. Use the format that carries the links.

Questions people actually ask

Is there an HTML macro in Confluence Cloud? No. It exists in Data Center, not in Cloud, which is why image maps, custom scripts and pasted embed codes do not survive the move.

Can I link an image to an attachment or a file? Yes. The link control on a selected image accepts a Confluence page, an attachment or an external URL, the same as a text link.

My image map worked in Server. Why not now? Because it was rendered by the HTML macro, and that macro did not come to Cloud. The page will show the image, and the clickable areas simply will not be there.

Does a PNG exported from draw.io keep its links? No. PNG is pixels: whatever the shapes knew about their destinations is gone the moment you export. If you want the links to survive, export SVG.

Will the browser's own zoom break the hotspots? With hand-drawn hotspot coordinates, scaling is exactly where things go wrong, which is why the apps that do this properly store areas in relative terms. With a vector diagram the question does not arise: the shapes scale, and so do their links.