Internet tips Intranets

Interactive Images in Sharepoint

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…

  1. Upload your base image to GDrive
  2. Head to Janvas
  3. Click on the GDrive icon at top right then ‘Import image’
  4. Select the area you want to be clickable
  5. Click on the hyperlink icon at right and paste in your URL
  6. Use _parent for the target (this will replace the parent of the iframed page, rather than go to the link within the iframe)
  7. Repeat for all areas of the image you want to be clickable
  8. Click on GDrive > Publish as HTML
  9. Copy and paste the HTML into notepad and save as an aspx file
  10. Upload the aspx file to a document library
  11. 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…

Leave a Reply

Your email address will not be published. Required fields are marked *