Creating an Image Map in SharePoint Designer 2010

I’m not sure why this isn’t documented, but thought I’d share the solution in case someone is looking to create an image map with SharePoint Designer 2010.  To set the stage, I’ll borrow shamelessly from the article showing how to do this with FrontPage 2003- Create an image map:

A picture with one or more clickable areas or hot spots (hot spot: An area on an object containing a hyperlink. An entire object can be a single hot spot, or an object can contain multiple hot spots. A picture with hot spots is called an image map.) is called an image map.

The automobile image map in the illustration includes three hot spots, each of which links to a separate page that provides more information about that specific feature — windshields, headlights, or wheels and tires.

In SharePoint Designer 2010, all you need to do is open page and select the picture (that you want to add an image map to).  At the top of the Ribbon, click on Picture Tools –> Format –> Hotspot, and then add in whatever hotspots you want (after adding the hotspot, you will be prompted for the URL you are linking to).

Note: This will not work on Publishing Pages, as SharePoint Designer will only let you edit the layout of publishing pages, and not the content.

Comments

• Anonymous
  January 01, 2003
  You made my day - thank you for this tip!

• Anonymous
  January 01, 2003
  Good post - thanks for posting this walkthrough

• Anonymous
  February 10, 2011
  You can edit the content of a publishing page if you detach from the page layout. Good post n

• Anonymous
  March 09, 2011
  The comment has been removed

• Anonymous
  August 12, 2011
  Great post. Can we also, Highlight the selected area too? Or do we need to have java script for that? thanks

• Anonymous
  October 03, 2011
  Well, I tried different ways, always hotspots lost. I tried using content editor and had my custom HTML code also in Sharepoint Designer 2010...none worked...Always sharepoint overwritten. Any clue. roy

• Anonymous
  October 19, 2012
  The comment has been removed

• Anonymous
  October 30, 2012
  The comment has been removed

• Anonymous
  November 12, 2012
  The comment has been removed

• Anonymous
  December 07, 2012
  Does anyone ever look at this page??

• Anonymous
  December 20, 2012
  Hello Carol, I have/had the same issue as you.  Quick workaround Just start a blank html page and insert the image and do your hotspots within that HTML page and then grab all the code and paste into your actual public page that needs the hotspots.  This worked 100% for me and i am able to edit page and keep links 100%. Feel free email me at dezmond928@yahoo.com

• Anonymous
  March 11, 2013
  How do I remove the border from the image.

• Anonymous
  March 18, 2013
  I have the same issue.... Once I've added my hotspots (which is working great - THANK YOU!) how do I remove the border from the main image??

• Anonymous
  March 26, 2013
  to remove the border, from the edit menu, you have to add code to the HTML coding.  Once in edit mode for the HTML, after the PNG/GIF/JPEG add border= "0" This will remove the border.

• Anonymous
  April 18, 2013
  has anyone done this in sharepoint designer 2013 yet?

• Anonymous
  July 17, 2013
  Two things to note:

1. To display in a publish page, use the Content Editor web part and create a Content Link to the image map page as a text file. Use the URL of the Image Map page as the link.
2. To keep the hotspots from "disappearing", change the default name of the image map (FPMap0) to something more specific to your page (in the example shown above, I'd use something like "antique_car") this name appears three places in the code. Replace the default name in all of the places.

• Anonymous
  March 24, 2014
  You could also copy the html for the image to publishing pages. My system won't allow me to detach content from page layouts
• Anonymous
  May 19, 2014
  I created hotspots for images in SharePoint Designer 2010. Now I need to change them but we've gone over to SharePoint Designer 2013 - with no design view. Frustrating. Anyone else had this problem?
• Anonymous
  August 18, 2014
  Any word on this working and how to get it to work in SharePoint 2013
• Anonymous
  December 18, 2014
  Can this be done is Designer 2013?