If you have a need to embed an image with clickable sections within it across SharePoint (or any web content management system, for that matter), there is a reasonably easy way to accomplish this…
- Upload your base image to GDrive
- Head to Janvas and click ‘Open Janvas’
- Click on the menu at top left then ‘File/Import image’
- Select the area you want to be clickable
- Click on the hyperlink icon at right and paste in your URL
- Use _parent for the target (this will replace the parent of the iframed page, rather than go to the link within the iframe)
- Repeat for all areas of the image you want to be clickable
- Click on GDrive > Publish as HTML
- Copy and paste the HTML into notepad and save as an aspx file if using SharePoint
- Upload the aspx file to a document library
- Get the URL to the .aspx file, and use the embed webpart to integrate the image across any pages in your tenant
To get the raw HTML for the image above, download the following HTML file…