15
Oct
10

Let’s Make a Clickable Image Map Using SharePoint Designer 2010

…and I do mean Map!

Get your base image and copy it to the clipboard.  I’m going to use a map of the world.

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

Advertisement

14 Responses to “Let’s Make a Clickable Image Map Using SharePoint Designer 2010”


  1. 1 Anirban
    March 23, 2011 at 8:20 am

    Very helpful post. This is exactly what I needed. Thanks for this post

    Regards,
    Anirban

  2. 2 Eric
    February 21, 2012 at 3:37 pm

    Worked perfectly. Thanks for taking time to post this.

  3. 3 dorothy
    May 23, 2012 at 10:34 am

    what if i’m using sharepoint 2007?

  4. 5 G. Jesse
    October 25, 2012 at 6:08 pm

    Is it possible to have image rollovers as well?

    • 6 Russell Wright
      October 29, 2012 at 6:51 am

      I’m sure it is. Haven’t messed with this lately and don’t know if I’ll get “a round tuit” anytime soon.

  5. 7 Jay
    February 12, 2013 at 5:29 am

    How do you paste it into the HTML view of a content editor web part. ?

  6. 8 Ashley B
    March 4, 2013 at 5:01 pm

    I am having a hard time getting my image to display on the SharePoint site. I have tried using JPEG and GIF, neither show the image…but you can click to various places on the blank square and it will direct you to the righ location. Any suggestions on how I can fix this? Thanks!

    • 9 Caitlin
      April 11, 2013 at 11:03 am

      I’m having the same issue as Ashley B. I’ve even tried to save the picture within my own SP site but am having no luck in getting it to show up. Thank you!

  7. 10 elmira
    August 28, 2013 at 4:45 am

    Thanks a lot ,Very helpful,this saved my time.

  8. 11 Dan
    October 17, 2013 at 5:56 pm

    Worked beautifully! Thanks for writing this up. I spent half a day looking for instructions on how to do this.

  9. 12 Petina
    April 25, 2014 at 8:05 am

    This was very helpful. Thank you for this post. I am now looking for an additional item where they can change the color of the state to 1 of 3 colors (red, yellow, green). Any help with this would be wonderful. Thanks

  10. 14 Blacki
    September 16, 2016 at 1:08 pm

    Is there anyway to do this that allows the user to “mouse-over” or hoover the hyperlink to preview the information.
    I have an office floorplan that is too small for names but I want them to be able to at least see the name of the person that the desk before selecting their chose to navigate.
    I have another list which references the employees and there details and it would be ideal to eliminate the need for a supporting detail list on the page.


Leave a Reply to Ashley B Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


Asif Rehmani’s SharePoint Videos

SharePoint-Videos

Click to access a wealth of SharePoint videos

SharePoint Rx

SharePoint Rx Home

Categories

Posts by Date

October 2010
M T W T F S S
 123
45678910
11121314151617
18192021222324
25262728293031
Support Wikipedia

%d bloggers like this: