For any SharePoint lover (who like me cannot code from scratch to save their life), the loss of the Designer View in SharePoint (Designer) 2013 was devastating, to say the least. A bit like the Matrix without the sunglasses. I used this when creating image maps (solid image with multiple hotspots / clickable areas). Why did they remove this? “Compared to current versions of Internet Explorer, Design view is an older technology that does not support many new HTML5 and CSS tags.” All true, image maps themselves were as responsive as Vista on 512mb of RAM, and designing for a specific resolution was impossible.
In this blog I’ll explain how to build a page with a single image and multiple hotspots (image coordinates). This is called an image map.
Create the image:
1. I’ve created the image in PowerPoint (jip ’cause that’s how I roll…)
2. I set the page size to 1600×900 pixels (42.32×23.81 cm’s).
3. I inserted a shape to indicate 1366×768 pixels (most popular screen resolution) – this would help me to not design any clickable areas outside of this size. You can work on less due to space lost for the left navigation and top of your site / IE menu. See image below to illustrate:
Save the image:
1. Set the PowerPoint on 100% Zoom, remove the 1366 guideline.
2. Snip the full image and paste in Excel (also set to 100%)
3. Also upload this image to your Site Assets library on SharePoint
4. Copy the URL to the newly uploaded image (paste somewhere for later use)
Add hotspots (clickable hyperlink areas):
1. In excel I will add a shape – remove the outline and fill (so you actually won’t see it until you click on it)
2. On these ‘invisible’ shapes I will right-click and insert hyperlinks for the different areas to be linked to different destinations.
3. Set the print area to include the whole image
4. Save the file as a Web Page (go to the Publish options and ensure that you’ve selected Print Area NOT Entire Workbook or Sheet 1)
5. Publish > This file will be published locally as an HTML document (HTM / HTML)
6. Double click and open the HTML file
7. It will open in the browser (with a URL that points to your local machine)
8. Right-click and View source
9. Copy all the HTML code
NOTE: 64bit users should save the file as a Single File Web Page (MHTML). Follow the same steps above.
Insert HTML on SharePoint Wiki Page:
1. Create a Wiki page in SharePoint (refer to my previous posts for the “how”)
2. Edit page
3. Click on the page and under Format Text tab click on Edit Source (HTML Source)
4. Paste the code you copied in the “view source” step
5. Click OK to save the HTML Source (you will not see the image on the page – only the hotspot)
6. Click on the image and Edit the Source code again
7. Find the “IMAGE SRC reference” for the image as it still points to your local pc
8. Replace the SRC reference with the image URL you copied from your site (above)
9. Save the page
Voila!! How much of fun is that!! See below what the final product looks like. Take note all the post-its etc. are clickable. Keep in mind that these images are normally quite large and page load will be affected. This is really meant for end users with no development skills, wanting to get creative with navigation.