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.