#Office365Challenge – 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 very challenging.
However…. I managed to create many beautiful pages for navigation without ever ‘creating my own code’. This post will show you how to accomplish this without the Designer view in SharePoint Designer.
Day: | 25 of 365, 340 left |
Tools: | Microsoft Office; Excel 2013; PowerPoint 2013; SharePoint |
Description: | How to create an image map for SharePoint |
This post will cover the following steps:
- Create the Image in PowerPoint
- Create the Hotspots (hyperlinks) in Excel
- Create the Web Page (code)
- Insert the code on SharePoint Page
Step 1 – Create the Image in PowerPoint
I’ve used SmartArt to create an Image for my PDCA cycle (Plan Do Check Act)
I then used Snipping Tool to snip this image and saved it to my C:Drive.
Step 2 – Create the Hotspots (hyperlinks) in Excel
I’ve pasted this image in Excel. Now we’ll add shapes with hyperlinks on them to “simulate” the hotspots we used in SharePoint designer (before 2013).
On the image you pasted in Excel (1) Add shapes (2) > right-click on shapes and add hyperlinks (3) for the areas you would like the users to navigate to, when clicking on that area.
Once this is done, you should change the properties of all the hyperlink shapes to have no fill and no line (transparent). It will now look like the original image you pasted in Excel.
Step 3 – Create the Web Page (code)
Now you have to set the print area – ensure including all fields and the full image.
Preview the page (1), setting the page orientation to landscape (2), go to Page Setup (3) to adjust the scaling % which will ensure the image fits a full page (5,6)
If you’re happy with the layout, you can now save the page as a Single File Web Page.
Save As > Single File Web Page (1), click on Publish (2), ensure that the Items to Publish is set to Print Area, click on Publish (3).
Navigate to where you saved the document. You’ll see a file with a MHTML extension. Open the file. It will open in your browser. You’ll notice the clickable hotspots – this is where you decide if you’re happy with the file, links as well as the size it displays in the browser – if not – repeat above steps until you’re happy with the end result.
Right-click (1) on this file that has opened in the browser, click on View Source (2), Select All (3) and Copy (4). Paste this in a notepad / word document for later use. And that is how I “create my own code” haha. If you’re not pretty, you have to be sneaky clever!
Step 4 – Insert the code on SharePoint Page
The first thing we’ll have to do, is upload the image (the one you snipped right in the beginning before taking it to Excel). You can upload this in the Site Assets Library or somewhere else if you choose so. When uploaded, copy the url to the image, paste this in a separate notepad / word document, for later use.
Open the page where you want to add the Image Map. Edit the page. Now we’ll add the Script Editor (for the code).
Insert (1) > Web Part (2) > Media and Content (3) > Script Editor (4), click on Add (5).
Edit the Script Editor Web Part (click on dropdown next to web part on right). Then click on Edit Snippet. This is where you’ll paste the code you’ve copied from your MHTML page previously. Click on Insert and Apply. You’ll only see a box with an “X” on the page as SharePoint cannot find the image which is on your C:Drive.
Edit the Web Part again – look for the part of the code where it references the image on your c:drive. The easiest would be to copy it from the Snippet – paste in notepad and search for the “imagedata src=” or “img src”. SharePoint changes the code once uploaded – so it might look different to the code you inserted initially. When you find the reference(s), replace the Image location (the section between the quotes ” xxxxx “) to the URL you’ve copied from Sharepoint and paste this all back into the Snippet on SharePoint.
Note: Your URL from your SharePoint site must be relative.
For example – my original URL was: https://SERVER/TeamSite/SPS/SiteAssets/PDCA.PNG
I replaced this with: /TeamSite/SPS/SiteAssets/PDCA.PNG
Click on Insert and Ok to Apply your changes. Save the page – it should now display the Image as well as the hotspots with clickable Hyperlinks.
You can change whether the image must be centred or left aligned by editing the web part, find the code “align=center” and change that to “align=left”.
In my example I changed the Text Layout of the page to be two columns. I inserted my Image Map on the left and a Document Library on the right.
And that’s it!! Image Maps are a great way to create alternative navigation based on processes etc.
Overview of my challenge: As an absolute lover of all things Microsoft, I’ve decided to undertake the challenge, of writing a blog every single day, for the next 365 days. Crazy, I know. And I’ll try my best, but if I cannot find something good to say about Office 365 and the Tools it includes for 365 days, I’m changing my profession. So let’s write this epic tale of “Around the Office in 365 Days”. My ode to Microsoft Office 365.
Keep in mind that these tips and tricks do not only apply to Office 365 – but to the overall Microsoft Office Suite as well as where applicable, SharePoint.
April 7, 2016 at 9:56 am
There are standards for creating web pages and both SharePoint and IE have traditionally been incredibly bad at following those standards. Microsoft is finally making IE follow the standards – but in doing so, this sometimes breaks old HTML or CSS that was designed for the old, non-standard IE way of doing things. In the case of Designer View, they must have decided they didn’t have time/money to correct their code. NB If something works in IE but not in other browsers, it’s usually because that something isn’t following standards – not because IE is better.
Your solution for image maps is a good one if you want to exclusively use MS products, but it will produce unnecessarily bloated code that will slow down page load times. A cleaner solution would be to save your image as a JPEG/PNG etc. then open it in an image editor. From there you have two options: 1) Create hotspots in the image editor, if it has such a feature, and export the resulting HTML; or 2) Get the coordinates of where you want hotspots to go, and then create the HTML file yourself with these coordinates. This requires typing a bit of HTML but it‘s only a very small amount to learn – much less than what Excel produces. See http://www.w3schools.com/tags/tag_map.asp
April 7, 2016 at 5:12 pm
Thank you so much for the tips I appreciate!!
March 13, 2018 at 3:32 pm
Hello,
Great trick, but you can produce probalby even more detailed clickable area usings (for example) “The Gimp”, (after you have opened/created your picture) menu “Filters” → “Web” → “ImageMap…”
You just have to define graphically the areas and type the links.
Hope this helps,
Best Regards,
eRic
March 13, 2018 at 6:34 pm
Hi Eric, sadly this is not possible anymore without SharePoint Designer Views. I’d love to hear your thoughts or see examples of cool stuff you’re doing?
April 9, 2019 at 7:08 pm
Hi ,
However i have difficult to map the Image in the code. Do i need to change all link or just once?
May 27, 2019 at 5:54 am
Any reference to that file must be changed. Search the code. Would be easiest.
April 11, 2019 at 12:04 pm
Thank you for sharing.
I have questions.
1. I have 18 hyperlink in 1 image,
Do i need to change all Imagedata src = ? Or just once?
May 27, 2019 at 5:53 am
Hey there. SharePoint 2013. Wow so long ago, I don’t even have access to on premises version anymore. I hope you came right? If I remember right you have to change all.