Create a Clickable Image Map in SharePoint Online

Requirement: Create an image map in SharePoint Online modern page.

How to create an image map SharePoint Online?

An image map is a graphical way of dividing a single image into multiple sections, each with its own hyperlink. By creating an image map in SharePoint, you can add hyperlinks to specific regions of an image. This can be useful for creating navigation menus, showing relationships between different parts of an image, or just for providing links to different areas of your site. If you have ever tried to create an image map in SharePoint Online, you know that it can be a bit tricky. To create an image map in SharePoint Online, follow these steps:

1. Create an Image Map
2. Upload the Image and ASPX file to SharePoint Online
3. Insert the image map to the SharePoint page using the Embed web part

Step 1: Create an Image map

You can create an image map using an image editor like Adobe Photoshop or SharePoint Designer. You can also use Online tools like https://imagemap.org/. Insert an image, and you can add hotspots by drawing lines around a specific portion of the image, and then You can define the target URL for each hotspot. Make sure to leave enough space between each section so that users will be able to click on the individual areas without accidentally clicking on another one as well. Once you’re happy with your grid, save the generated code as ImageMap.ASPX (or any file.ASPX).

Step 2: Upload the Image and ASPX file to SharePoint

Once you are ready with the image map code, upload the image you used for the image map, and update the code you copied in the previous step with the image reference from SharePoint. And then upload the aspx file to any of your SharePoint Online libraries like “Site Assets”.

Step 3: Insert the Image map to SharePoint Online Modern Page

Finally, we have to add the image map to a SharePoint Online page using the Embed web part.

1. Navigate to the SharePoint Online page where you want to add an image map. Click on “Edit” and insert the “Embed” web part on the relevant portion of the page.
2. Edit the web part and set the embed code to the URL of the ASPX page you have uploaded, ImageMap.aspx in our case.
3. Save and publish the page.

Here is the visually appealing SharePoint Image map in action:

In Classic sites and SharePoint On-premises, you can use the script editor web part to add an image map: How to Create Image Maps with SharePoint Designer?