Creating an Image Map in SharePoint Designer 2010

Creating an Image Map in SharePoint Designer 2010

  • Comments 18
  • Likes

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
  • You made my day - thank you for this tip!

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

    Good post n

  • 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! :-)

  • Great post.

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

    thanks

  • Good post - thanks for posting this walkthrough

  • 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

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

    Sincerely,

  • 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

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

  • Does anyone ever look at this page??

  • 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

  • How do I remove the border from the image.

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

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

  • has anyone done this in sharepoint designer 2013 yet?

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment