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.
However…. I managed to create many beautiful pages for navigation without ever ‘touching code’. See below for some cool ideas:
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.
September 15, 2015 at 5:09 pm
Hi, thanks a lot , I created the mhtml page and it works fine . However when i try to create a wiki page and edit the source code I don’t see a “img” tag . Can you please help ?
September 15, 2015 at 7:15 pm
Hi Nasir. Once you’ve copied the code to the page, and save the page the links will be clickable (the hotspots will show) but the image will most probably show as a red cross, cause SharePoint cannot find the image as the code points to your local (pc) drive. Edit the page again and open the code – if you can’t find it copy it to Word or something and search for the image (png/jpeg). Then you’ll know where to find it in the code. Then change that part to point to the URL of the file where you uploaded it on your site Voila!. If you don’t come right – comment and I’ll gladly assist.
September 15, 2015 at 8:09 pm
I think in Mhtml pages the image is “embedded” and hence img tag can’t be seen and changed.
Even though if one has a 64 bit machine he/she should still save as normal html. It will create a filelist.xml file in the folder with pictures. You have to identify what is really the name of the picture by trial and than change the img src for that picture only to point to ur sharepoint asset library.
I think the comment saying 64 bit machines should save in mhtml should be taken out. Coz at least for me it did not work.
Lastly much much thanks.
September 15, 2015 at 8:25 pm
Thanks for the tip Nasir.
November 3, 2015 at 8:50 pm
Do you have a video on YouTube that shows exactly what you did here??? I need to see it please.
November 4, 2015 at 4:51 am
No I don’t, but I’d gladly answer any questions you might have.
February 2, 2016 at 2:46 pm
Hi !
Thanks a lot for your tips, works fine for me! Only problems: the quality of the pictures is drastically reduced on the web page… especially the shadows are awful, could count the pixels!
Do you have any idea why? If yes, would you have a tip to improve the pictures quality when turned into html?
Thanks in advance!
February 16, 2016 at 2:35 pm
Hi there. Could be your browser or compatibility settings. Please check which browser and try different one’s as well as adding my blog to your safe and trusted sites?
February 16, 2016 at 2:32 pm
Hi Tracy,
thanks for this post, it really changed my life 🙂 unfortunately it changed only mine, ’cause the rest of my colleagues who have access to the sharepoint site cannot see any picture on the page, just the hotspot. Any clue what this depend on?
February 16, 2016 at 2:37 pm
Hi there. If you remembered to add the picture to a sharepoint library then re-reference the image URL in the code – the only thing left could be that the other users don’t have permissions to see the image in the library where you loaded it? Test that first. Make them go to the images or site assets library (or wherever you loaded it) and see if they can actually see and open the image there? You are welcome to ask more questions. I would gladly help you.
February 16, 2016 at 2:48 pm
Hi Tracy, thanks for the quick reply. You made really a good point actually, but I checked and they all have access to the library where my image is stored. Do you think this can depend on the browser version? thank you again for your help!
February 16, 2016 at 4:01 pm
Hmmmm. So check compatibility view settings on their machine and check it on different browsers.
February 16, 2016 at 4:04 pm
Also. If you can on their machine sign in as yourself on SharePoint – that will rule out whether it’s permissions or the user’s environment / pc. And they might have access to the library – but do they see the image? It might be pending – not approved then they won’t see it. I’m really interested to see what’s causing this and would gladly help until we do!
October 25, 2016 at 1:13 pm
Hi! Thank you soooo much for this post! You just made me the star of our company because nobody knows how to create image maps but everybody wants to have them (we’re in the process of creating a new Intranet in SharePoint … and now I found your post and with some minor adaptions it worked perfectly!
You made my day! 🙂
November 1, 2016 at 7:25 pm
You’re so welcome. Please remember this is not best practice for Intranet landing pages etc. As it’s not responsive and affects your page load performance. I use these on team sites and wiki pages. Still a great idea if you don’t have crazy designer skills and want to achieve awesome stuff – fast. Enjoy!!
November 1, 2016 at 7:31 pm
Yes, I’m aware of that but I needed a quick fix and your solution was one until I fond someone who can do it the right way. Thanks again.
December 2, 2016 at 3:28 pm
Hi Tracy,
This is a really neat ‘get out of jail’ approach – well done for figuring it out. I am struggling over one aspect though – where I use a shape (in my case a rectangle), the final web page messes with that on screen and displays a duff picture shape (the one which is a little white box with a black square and white X in it). Have you seen this using your method and are there any tricks to avoid that on screen? The linked pages open fine and everything else is good however. Cheers. Alan C.
December 2, 2016 at 5:34 pm
Hi Alan, replying from phone so might misunderstand but let’s try. When it displays the little box with the x, it means it doesn’t find the image (cause it still reference your local c:Image). Upload the image to your site assets and copy the url. Then edit the source code on the page and replace the image reference with your URL. It also helps if you copy the code from SharePoint back into Word and search for the image name to see if you’ve replaced it all. If I’m misunderstanding (or not listening) reply and I’ll try again. 🙂
December 5, 2016 at 2:36 pm
Hi Tracy and thanks for the reply. The main image itself is fine as I’ve managed to link that back to the correct element in the Site Assets, however each hyperlink element is where the problem occurs (I used the rectangle shape). Although the URL still operates for each of these, the discreet shape element is ‘lost’ somehow and that’s what I think the ‘dead image icon’ is representing. Any further thoughts – I am so close!!!!! Regards. Alan C.
December 5, 2016 at 2:51 pm
Hi Alan, sending you a mail. T.
January 13, 2017 at 1:44 pm
Dear Tracy,
Thank you so much for your guidance here. Seeing the end result is such a great feeling 🙂
Just to share my experience – initially, I followed the steps as described above but always got the ‘x’ image when trying to use either the ‘Edit Source’ option (which my Sharepoint automatically redacts a huge part of the data for no reason at all and leaving a rump of a code which is of no use) or the Content Editor web part (which caused further frustration because there’s simply no code to tweak).
It finally worked when I adopted your Day 25 solution ‘Image Maps in Sharepoint 2013’ by using the Script Editor web part which retains the source code and all that is left is to rectify all the correct URLs.
Again, many thanks and have a great weekend!
January 13, 2017 at 1:58 pm
You are so welcome. Same to you.
January 13, 2017 at 2:47 pm
Have you tried – http://SharePointimagemaps.com?
January 13, 2017 at 3:03 pm
Hi Jon. No I haven’t – I see it’s an add-inn. Tx for the share.
January 13, 2017 at 3:12 pm
Yes- it’s vey easy to use and you can create some impressive image maps with dynamic content. We use the capability to read content from our news list to keep it fresh. They provided us with an .app file to install in our SharePoint 2013 farm as we cannot add from the store. Take a look
March 22, 2018 at 5:10 pm
HI Tracy, how do i remove the outine when clicking on the hotspot?
March 31, 2018 at 7:11 am
Hi, just search for my Image map posts. I haven’t done this in years 🙂, in the code you’ll see the reference to remove the line. I’ll have a look as well.
November 13, 2020 at 7:31 pm
Thank you for this helpful information. I am very close, but am doing a step wrong. I have about 9 “x” spots for placeholders for the image. I have one image. If I replace the source with the single image, it just repeats it in all 9 locations. How do I get the single image to cover the whole page and the html to just put links where I put them in the Excel portion? Thank you.
May 1, 2021 at 8:46 am
Hi Dawna, I’m so sorry, but don’t work with SharePoint 2013 anymore. Wouldn’t even be able to troubleshoot it for you as I don’t have on premises environments anymore.