Create Clickable SharePoint Online Image in SharePoint
A SharePoint Online tutorial by Peter Kalmström
SharePoint Designer 2010 it is possible to create
hotspot images – pictures with clickable links. That
possibility is removed in SharePoint Designer 2013, but
if you are using SharePoint Designer 2010 without
updates, you can open a SharePoint Online or SharePoint
2013 page in SharePoint Designer 2010 and add the
THIS IS NO LONGER POSSIBLE. We will remove this article
as soon as the new version of SharePoint Online from
Scratch has been published.
INSTEAD, refer to our article about
clickable links in Excel.
In the demo below Peter Kalmström, CEO and Systems Designer
of kalmstrom.com Business Solutions, shows how to add an
image to a new SharePoint Designer 2010 .aspx page, add
hotspots to it and then add the picture code to a SharePoint
Online wiki page.
Peter is using the same image as in the demo about
adding a PowerPoint
image with clickable links to SharePoint. In that demo
he creates the links in PowerPoint, but by using SharePoint
Designer 2010 he will have a cleaner picture. As PowerPoint
does not give a possibility to define size of a picture,
he starts with resizing his PowerPoint image in Paint.
Create a picture with clickable links in SharePoint
Now you have a page with the hotspot image, but it is a
separate page with no connection to the rest of your SharePoint
site. This is how we want it to be:
Open the SharePoint page where you want to place the
clickable image in SharePoint Designer 2010.
- Create a new .aspx page. (You cannot edit existing
pages in SharePoint Designer 2010.)
- Edit the new page in advanced mode.
- Click on the Picture button under the 'Insert' tab
and browse to the image you want to use.
- Select the image and click on the Insert button.
- Select the image to see the 'Picture tools' tab.
- (Click on the Properties button and set the border
thickness to 0 if you don't want a border around the
- Click on the Hotspot button and select the form
of the hotspot.
- Place the mouse cursor in the corner of the area
where you want the hotspot and drag it to the preferred
- When you let go of the mouse a dialog for the link
URL will be shown. Enter the path to the website you
want to link to.
- Repeat step 8-10 for each link.
- Save the page.
Add the hotspot image to your preferred page
- In SharePoint Designer 2010, open the code of the
page with the hotspot image.
- Copy the map and image code for the hotspot image.
- In SharePoint, open the wiki page where you want
to place the picture in edit mode.
- Under the FORMAT TEXT tab, click on the Edit Source
- Paste the code you copied from SharePoint Designer.
- Save the page.