How to Create a Clickable Image Map in SharePoint Online (2026 Guide)

Updated 30 September 2026 · By APPS 365 LTD, makers of Image Maps for SharePoint

What is an image map in SharePoint?

An image map is a single image divided into clickable areas, usually called hotspots. On an intranet that might be an office floor plan where each room opens its details, an org chart where each team links to its site, or a process diagram where each stage opens the right policy. One picture replaces a long list of links and is far easier to scan.

Option 1: the built-in Image or Quick Links web parts

The standard Image web part on a modern SharePoint page lets you add one link to the whole image. That is fine for a banner, but it cannot give different parts of the picture different destinations.

A common workaround is to slice the picture into pieces and place each slice in its own Image web part, or to use the Quick Links web part in a tile layout. It works for simple grids, but the slices do not line up once the page is viewed on a phone or in a narrower column, irregular shapes are impossible, and every change means cutting new images.

Option 2: an HTML image map in the Embed web part

Older tutorials suggest generating HTML with <map> and <area> tags, saving it as an ASPX file in Site Assets, and showing it through the Embed web part. This depends on custom script being allowed on the site. Since mid-November 2024, SharePoint Online automatically turns custom script off again every 24 hours, so an administrator has to keep re-enabling it (or schedule a script to do so). Custom script is also a security and governance risk, and hand-coded image maps use fixed pixel coordinates that break on smaller screens.

Option 3: a no-code image map web part (recommended)

An image map web part built on the SharePoint Framework (SPFx) runs natively on modern pages without custom script. Image Maps for SharePoint is a dedicated web part for this job. Here is how to build your first map:

1. Install the Image Map web part. A SharePoint or Global administrator adds Image Maps for SharePoint to your tenant from Microsoft AppSource. The 14-day trial has full functionality.
2. Add the web part to a page. Edit a SharePoint page, select the plus (+) icon and add the Image Map web part. You can also use it as a full-page app or a Microsoft Teams tab.
3. Create a new image map. Select Open in Image Map Editor, then New. Give the map a unique name and choose a template: an image from your SharePoint picture library, Browse for Image, or one of 50 built-in country, continent and world maps.
4. Draw your hotspots. Use the polygon, rectangle, ellipse or icon tools in the left toolbar to draw a hotspot over each area of the image. Polygons follow irregular shapes such as rooms, regions or machine parts.
5. Choose what each hotspot does. In the Actions panel pick Follow Link, Open Popup, Go To Floor or No Action, and add tooltip content such as text, headings, images, video or buttons. Tooltip text can also be read from a SharePoint list.
6. Save and publish. Select Save and Exit, choose the folder and image map name in the web part settings, select Load Selected Image Map, then republish the page. Future edits to the map update every page that shows it.

Try it free for 14 days   Read the full user guide (PDF)

Which method should you use?

Tips for image maps people actually use

• Start with a clear, high-resolution image and compress it before uploading so the page stays fast.
• Make hotspots large enough to tap on a phone, and give each one a short, descriptive title.
• Use tooltips for context, such as opening hours or contacts, so people know what a click will do.
• Drive changing details from a SharePoint list so the owners of that content can update it without editing the map.
• Use floors for multi-level content, such as buildings, phased projects or before-and-after views.
• Target the audience so each group only sees the maps relevant to them.

Planning an office or building map? See our guide to interactive floor plans and office maps in SharePoint.

Frequently asked questions