Share via

Creating an Image Map in SharePoint Designer 2010

  • Article

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.

image

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).

clip_image002

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?