Create a Hotspot Image in SharePoint 2013
A SharePoint tutorial by Peter Kalmstrom
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
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
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
Step by step
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.
- 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
- 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
- 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.