Image Hotspots in Sharepoint Modern?

Question

Hi all,

I’m looking for some advice, please.

I’ve added a flexible section and a large process diagram to a SharePoint home page. I’d like users to be able to click different areas of the diagram and be taken to separate SharePoint pages.

So far, I’ve tried:

• Creating a diagram with embedded links in PDF and PowerPoint, then displaying it using the File Viewer web part. However, I’m not keen on how it looks like an embedded file rather than part of the page.
• Placing transparent text boxes over the diagram. This works initially, but when the browser window is resized, the links either move out of position, disappear or drop further down the page.
• Using buttons over the image, but these have the same responsive layout issue as the text boxes.

Is there a simple or recommended way to make different areas of one image clickable while keeping everything correctly aligned when the page or browser window is resized?

Any advice would be greatly appreciated! :)

Thanks, Emily

Answer 1

Hi @Emily,

Unfortunately, there isn't a built-in way to create responsive image hotspots on modern SharePoint pages.

The approaches you've already tried are the common workarounds, and each has the limitations you've already encountered:

• File Viewer preserves hyperlinks but displays the content as an embedded document.
• Buttons or text overlays can become misaligned as the page layout adjusts to different screen sizes.
• Modern SharePoint pages don't support traditional HTML image maps or multiple clickable regions within a single image out of the box.

If you're looking for a supported approach, here are the available options:

• Split the diagram into multiple images, with each image linking to a different SharePoint page. This works well if the process can be divided into logical sections.
• Use Visio for the diagram (if available). Shapes in a Visio diagram can contain hyperlinks, and the diagram can be embedded in SharePoint for a more interactive experience.
• Develop a custom SharePoint Framework (SPFx) web part. This is the recommended customization approach if interactive hotspots are a business requirement. An SPFx solution can render an image with responsive clickable regions that remain aligned as the page is resized.

For more information, you can refer to:

• Overview of the SharePoint Framework (SPFx) | Microsoft Learn
• Use the Image web part | Microsoft Support

So, while there isn't a simple out of the box feature for image hotspots in modern SharePoint, a custom SPFx solution is the recommended approach if this functionality is essential. Otherwise, one of the supported workarounds above would be the best option.