Create Clickable SharePoint Online Image in SharePoint Designer 2010
A SharePoint Online tutorial by Peter Kalmström In 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.
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 Designer 2010
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 image.)
- 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 size.
- 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 button.
- Paste the code you copied from SharePoint Designer.
- Save the page.