Creating an Image Map in SharePoint Designer 2010

Creating an Image Map in SharePoint Designer 2010

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

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

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