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 picture. Please refer to our article
on SharePoint Designer
installation and use with SharePoint Online/2013.
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.