Create SharePoint 2013 Hotspot Image

In earlier versions of SharePoint you could create a hotspot image directly in SharePoint Designer, but from SharePoint Designer 2013 this possibility has been removed. But you can still use hotspot images in SharePoint 2013, and in a new tutorial in the SharePoint links series I show how to do it.

Hotspot image, HTML map
Images that link different areas to different destinations have several names: hotspot images, HTML maps or map images. "Map" comes from a common use for such images – maps where you can click on countries or towns to get mer information.

One such image with clickable regions can replace several text links or buttons on a SharePoint page, and with a good design it makes the page look better. My design in the demo below might not be optimal, but I hope it serves its purpose: to show how to add a hotspot image to SharePoint 2013.

Get the code
In the demo below I use SharePoint Designer 2010 to create the hotspots in an image that shows the names of different SharePoint subsites. Regretfully it is not possible to create such images in the 2013 version of SharePoint Designer.

Hotspot or map images can also be created in other ways, but whichever method you use, you need the image HTML code to add the image to a SharePoint 2013 page. Once you have the code, you can just paste it into the page in edit mode.

Image changes
If you have good knowledge of HTML, you may of course also write the code directly in the SharePoint page, but for many SharePoint administrators it is easier to take the first code from SharePoint Designer 2010 or another editor.

Once you have the code in place on the SharePoint page, you only need basic HTML skills to change it. You don't have to create a new image each time you want to change a link, for example. You can just go into edit mode again and change the link directly in the code on the SharePoint page, just like you do with other links.

SharePoint links series
The tutorial about adding a hotspot image to SharePoint 2013 is the last one of those I planned on SharePoint links, but suggestions on more subjects are always welcome. All the demos are published with step by step instructions in the kalmstrom.com Tips section.

By Peter Kalmström
CEO and Systems Designer
kalmstrom.com Business Solutions