How to Create Image Hotspots for SharePoint

Image Maps For SharePoint

What is an Image Map in SharePoint?

An image map in SharePoint refers to an image with clickable areas (hotspots) that lead to different links or trigger specific actions. This functionality is particularly useful for creating interactive visuals, such as navigation menus, product showcases, or organizational charts. By using image maps in SharePoint, you can enhance your site's interactivity and user engagement.

Create An Interactive Image

First create an interactive image. If you are not already familiar with interactive-img.com. The following post describes how to create your first image.

Create an image

Add interactive-img.com To The HTML Field Security List

First the interactive-img.com url has to be added to the "HTML Field Security List" in order for the image to be used within a sharepoint page. To do that click on the settings button and navigate to "Site contents".

Navigate to site contents

After you have been redirected to "Site contents" click the "Site settings" button.

Settings sharepoint

On the next view click on the "html field security" link.

Html field security link

Add "interactive-img.com" to the allowed domains list.

Add url to allowed domain list

Embed The Hotspot Image Into The Sharepoint Page

After adding the domain head over to the sharepoint page where you want the hotspot image to appear. Add a new section and add "embed" content.

Embed element

Go to interactive-img.com dashboard choose the image you want to embed and click the embed button. An overlay will appear where you can choose from an js integration and iframe. Choose the iframe version and copy the embed code.

Embed overlay

Navigate back to the sharepoint page and paste the copied code into the the embed input field.

Image Maps For SharePoint

Save the sharepoint page and you are done you have successfully integrated the hotspot image.