Home >Tips >SharePoint Links >SharePoint 2013 hotspot images kalmstrom.com site map icon Site map  

Create a Hotspot Image in SharePoint 2013

A SharePoint tutorial by Peter Kalmstrom

SharePoint logoImages with clickable regions are often called HTML maps, image maps or hotspot images. Such images can be inserted in a SharePoint page, and in the demo below Peter Kalmstrom, CEO of kalmstrom.com Business Solutions and Microsoft certified SharePoint specialist, shows how to do it.

In earlier versions of SharePoint it was possible to use SharePoint Designer and create the hotspot image directly. Regretfully this functionality has been removed in SharePoint Designer 2013.

Instead you will have to use SharePoint Designer 2010 – or another tool that can create hotspot images – to create the image. Then you can copy the image code and paste it where you want the image to be placed on the SharePoint page.

SharePoint hotspot image

Peter first creates a new image in PowerPoint. Then he links the different parts of the image in SharePoint Designer 2010, before he adds the image code to a SharePoint page.

Step by step

  • Choose or create an image.
  • Create an HTML page in SharePoint Designer 2010.
  • Insert the image in the page.
  • Select the image to show the Picture Tools.
  • Click the Hotspot button and select the form of area you want to link.
  • "Draw" the area you want to link with the mouse cursor, by holding down the left key.
  • When you lift the left key, a hyperlink dialog will be displayed.
  • Click on the page you want to link to in the list, or write in the path.
  • Continue in the same way with the other areas you want to link.
  • Open the HTML page in Code mode and copy the image code.
  • Open the SharePoint page where you want to add the image in Edit mode.
  • Paste the image code into the SharePoint page on the place where you want it.
  • Save the page.
You may create a hotspot image from any picture, and you can make it clickable in other HTML editors than SharePoint Designer 2010. Pasting the code into the SharePoint 2013 page is however the final part in every case.




Also refer to the kalmstrom.com Blog post about hotspot images


Learn more









Always the latest news in the kalmstrom.com blog



Follow kalmstrom.com on LinkedIn Facebook, Google+  or Twitter!