Search SPC

a Clickable Image Map Using SharePoint Designer 2010


image

On the asset-based navigation in SPD 2010, you’ll need to navigate to an object that will allow you to create an HTML file in it. Here I’m using Site Pages, but you could also select All Files. You probably want to save it somewhere so you can modify it later, if need be.

image

Open the file (Untitled_1.html) for editing.

image

Delete the HTML that came with the new page.

image
Paste your image into the page.
image

Click on the map image and then select Format under Picture Tools. You’ll now have access to the Hotspot tool. Select either the Polygonal, Rectangular or Circular Hotspot drawing tool.

image

Using your coloring skills you learned in Kindergarten, trace each of the areas you want to hotspot.

image

When you close the polygon, you’ll get a dialog where you can enter the address that the hotspot is linked to.

image

Copy all the source to the clipboard…

image

…and paste it into the HTML view of a content editor web part.

image

You should see it displayed with the regions visible.

image

The finished product. Hovering over an area will give you "the hand" and clicking will take you to your hyperlink.

image