…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.
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.
Open the file (Untitled_1.html) for editing.
Delete the HTML that came with the new page.
Paste your image into the page.
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.
Using your coloring skills you learned in Kindergarten, trace each of the areas you want to hotspot.
When you close the polygon, you’ll get a dialog where you can enter the address that the hotspot is linked to.
Copy all the source to the clipboard…
…and paste it into the HTML view of a content editor web part.
You should see it displayed with the regions visible.
The finished product. Hovering over an area will give you "the hand" and clicking will take you to your hyperlink.
Very helpful post. This is exactly what I needed. Thanks for this post
Regards,
Anirban
Worked perfectly. Thanks for taking time to post this.
what if i’m using sharepoint 2007?
Use the “Picture Toolbar” You’ll see the same options on SharePoint 2007. (i.e. Polygon, circle, square, etc…)
Is it possible to have image rollovers as well?
I’m sure it is. Haven’t messed with this lately and don’t know if I’ll get “a round tuit” anytime soon.
How do you paste it into the HTML view of a content editor web part. ?
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!
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!
Thanks a lot ,Very helpful,this saved my time.
Worked beautifully! Thanks for writing this up. I spent half a day looking for instructions on how to do this.
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
Sorry I should have mentioned I used a US State map and each state has its own coordinates.
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.