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.

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 (21)

  1. Anonymous says:

    You made my day – thank you for this tip!

  2. Anonymous says:

    Good post – thanks for posting this walkthrough

  3. Chris Poteet says:

    You can edit the content of a publishing page if you detach from the page layout.

    Good post n

  4. Kirsti Fleming says:

    THANK YOU THANK YOU THANK YOU – I know hot spots or image maps is an older technology, but I did not want to start over on decent web page design just for a minor update. This saved me. I couldn't find it until I added the PICTURE TOOLBAR and there it was! :-)

  5. Usman says:

    Great post.

    Can we also, Highlight the selected area too? Or do we need to have java script for that?

    thanks

  6. sudhakar roy chinasumala says:

    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

  7. Carol Keinsley says:

    Trouble with the hot spots disappearing  whenever anything on that page is updated or changed.  How can I stop this.  

    Sincerely,

  8. Aji says:

    Trouble is that I can't get the image loaded in SharePoint designer 2010. How do i open the image in SP2010 from Library in order to create the hot spots

  9. Carol Keinsley says:

    Aji – you should save it in regular "SharePoint" – out of the box.. then open in SharePoint designer.

  10. Carol Keinsley says:

    Does anyone ever look at this page??

  11. Dezmond says:

    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

  12. Elizabeth says:

    How do I remove the border from the image.

  13. Michele says:

    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??

  14. Drew says:

    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.

  15. sharepoint 2013 says:

    has anyone done this in sharepoint designer 2013 yet?

  16. Jerry_Boyle says:

    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.

  17. Rachel says:

    You could also copy the html for the image to publishing pages. My system won’t allow me to detach content from page layouts

  18. Meep says:

    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?

  19. Diann G says:

    Any word on this working and how to get it to work in SharePoint 2013

  20. WF says:

    Can this be done is Designer 2013?