Creating an Image Map using SharePoint Designer

Home > Blogs > SharePoint > Creating an Image Map using SharePoint Designer

Creating an Image Map using SharePoint Designer

Like This Blog 7 Spike Xavier
Added by September 3, 2013

In this blog post, I will use an image provided by the graphics department as the navigation piece for my SharePoint Deployment. The nice thing about this approach is that the image is self explanatory about where the user should click and where it will take them.

I was provided an image by a student requesting this blog which saved me a lot of time.

I will create an image map using SharePoint Designer 2010.

When finished, the Home Page will look like this 

When-Finished-The-Home-Page-Will-Look-Like-This.png

I will start with an out-of-the-box Team Site and end up with a home page that looks like the screen shot above. If I click the PMO part of the image, I will be taken to one location and if I click on the Process part of the image I will be taken to another location. This is done using html’s image Map functionality.

Put the Home Page into Edit Mode 

Put-The-Home-Page-Into-Edit-Mode.png

First off, I want to get the home page ready. Since the top level site of this site collection is based on the team site template, the home page is a wiki page and thus I can simply click the edit page icon to put it quickly into edit mode.

Customize the Home Page in the browser 

Customize-The-Home-Page-In-The-Browser.png

With the page in Edit Mode I will go ahead and use the ribbon to change the layout of the page and get it ready for my image map.

Change the layout of the page 

Change-The-Layout-Of-The-Page.png

Using the Text Layout Ribbon Icon I choose One Column.

Delete the Existing Content 

Delete-The-Existing-Content.png

With my cursor in the content area, I select all the content (CTRL + A) and then I delete it.

Save the page 

Save-The-Page.png

I click Save and Close in the Ribbon which takes the page out of edit mode.

Open SharePoint Designer 

Open-SharePoint-Designer.png

I am at the top level site of a new Site Collection. The top level site template is a Team Site. To open SharePoint Designer 2010 connected to the correct site, I go: Site Actions > Edit in SharePoint Designer

Edit the Home Page 

Edit-the-Home-Page.png

In SharePoint Designer II click the link to Edit the Home Page.

Create Custom Content 

Create-Custom-Content.png

When I did this, my cursor was placed into the PlaceHolderMain and it was set to custom mode. Just in case, I like to click the little glif symbol on the right and make sure it says Default to Masters Content which indicates to me that the PlaceHolderMain is ready for custom content. If this was not the case, I would see ‘Create Custom Content’ and I would click that.

Begin to create Custom Content 

Begin-To-Create-Custom-Content.png

I click inside the PlaceHolderMain and I will insert my image here.

Insert the Image 

Insert-the-Image.png

I select the Insert Tab and then in the Ribbon I click on the Picture Icon.

Insert Image 

Insert-Image.png

I browse to my image (in this case it’s named image001.png and is located on my desktop) and then I select the file and click Insert.

Add Alt Text 

Add-Alt-Text.png

SharePoint Designer 2010 makes sure to remind me to insert Alternate Text. I put in Home Page Navigation Image since that’s what I’m adding. I leave out the Long Description and click OK.

Verify placement of Image and add HotSpot 

Verify-Placement-Of-Image-and-Add-HotSpot.png

I verify that my image was inserted where I wanted and that I inserted the correct image and then I click the HotSpot icon in the Ribbon (it’s in the Picture Tools > Format Tab). Because the shape of the section of the image is not a square or rectangle, I choose Polygon which in essence allows me to outline about any shape I want. I am creating an image map here. I have done this before in raw HTML and I must say that using this tool is about a billion times easier!.

Create the Polygon HotSpot 

Create-the-Polygon-HotSpot.png

 

I outline a section of the image by clicking the cursor at different points on the image. It will connect each section with a line and create an outline.

Tell SharePoint what you are linking to 

Tell-SharePoint-What-You-Are-Linking-To.png

 

Once I come to a point in my shape where two points meet, I have completed a shape and SharePoint Designer gives me a pop up box where I can set the link’s href value. In other words I’m telling SharePoint where to send a user when they click that part of the image. In this case, I’ll link the shape that includes PMO to http://www.interfacett.com but if this was production I would put in the URL to the PMO Site.

When I’m done I click OK.

Optionally, set Target Value 

Optionally-Set-Target-Value.png

 

If you click the Advanced button you can set the target. In many cases people will set Target = _blank causing the link to open in an new browser instance or tab (depending on the browser). I’ll just hit cancel because if I was setting this up to be my ‘SharePoint Custom Navigation’ I would want it to stay in the same window.

Click OK 

Click-OK.png

 

I click OK.

Save embedded files 

Save-Embedded-Files.png

 

I click OK and accept the default settings in the Save Embedded Files Dialog. This is where SharePoint adds a copy of the image to the SiteAssets library and then updates the HTMLt img tag to point to the SiteAssets Library as opposed to my desktop.

Safe Content Dialog Box 

Safe-Content-Dialog-Box.png

 

SharePoint Designer will do it’s best to protect me from unsafe content and strip anything crazy I added to the page as it saves the changes I made. This dialog simply asks if I’d like to see the page with those changes. I click Yes.

Verify my changes 

Verify-My-Changes.png

I set up another link around the section that contains Process and set the target url on that to go to http://www.transmissionit.com. To test all this I go back to the browser and hit refresh and see that it took my changes and then I click on the PMO section of the image.

Success! I’m taken to Interface 

Success-I-Am-Taken-To-Interface.png

 

Awesome! I’m taken to Interface Technical Training’s Web Site.

Verify the Link to TransmissionIT 

Verify-The-Link-To-TransmissionIT.png

As I said earlier, I set up a link to http://www.transmissionit.com in the Process section of the image so I’ll test that as well by clicking it in the browser.

I’m taken to Transmission IT 

I-Am-Taken-To-Transmission-IT.png

 

Yep, it worked, I’m taken to http://www.transmissionit.com. Awesome!

The reason I check two different locations is to verify that the image wasn’t just becoming one big link.

Image maps are very powerful and the tool-set that ships with SharePoint Designer out of the box is incredible.

Videos You May Like

Using Navigation Controls in a Collaboration Site in SharePoint

0 337 1

In this SharePoint training video, I want to talk about the Navigation Controls in SharePoint. They tend to fall into two kind of different categories; one with the navigation controls in a typical Collaboration Site such as a Team Site or a Project Site. These are Sites that are based on the Team Site Template … Continue reading Using Navigation Controls in a Collaboration Site in SharePoint

How to Configure Navigation in SharePoint Publishing Sites

0 1145 3

For more SharePoint training videos in this series, see: Part 1 – Using Navigation Controls in a Collaboration Site in SharePoint Part 2 – Using Navigation Controls in a Publishing Site in SharePoint Part 3 – Configuring SharePoint Navigation in a Publishing Site – Activating the Publishing Feature Part 4 – » How to Configure Navigation in … Continue reading How to Configure Navigation in SharePoint Publishing Sites

Detailed Forensic Investigation of Malware Infections – April 21, 2015

4 608 5

How does an investigator hunt down and identify unknown malware? In this recording of our IT Security training webinar on April 21, 2015, Security expert Mike Danseglio (CISSP / CEH) performed several malware investigations on infected computers and identify symptoms, find root cause, and follow the leads to determine what’s happening. He demonstrated his preferred … Continue reading Detailed Forensic Investigation of Malware Infections – April 21, 2015

Write a Comment

See what people are saying...

  1. Avatar CIRRUS SOFT

    SharePoint Image Maps is the SharePoint Add-in to create interactive images with eye-catching content from within SharePoint. Images contained within a Picture Library will have the option to create an Image Map directly from the image’s Context Menu. You can even set the content text to be taken from a SharePoint List for easy updates. The generated Image Map is fully responsive and optimized to work across all devices.

    http://sharepointimagemaps.com/

  2. Avatar Bonnie D

    I’m trying to do this exact thing in a SharePoint 2010 wiki page, however, I do not have the option to select “Edit in SharePoint Designer” from the Site Actions drop-down.

    Can this be done on a wiki page (maybe my permissions are not complete?), or only on a normal SharePoint page?

    Thx!

  3. Avatar Aamy

    Very Good…….. Thnks

  4. Avatar jo-el h

    I tried this several times using Sharepoint and Designer 2010–followed all the steps and saved the image to assetts folder in the process. When I went to view on the site, the hot spot (circle) was there, but the image did not show up. I tried it with a jpg and a png. NO luck. Any ideas. I really need this for a job I am doing. Thanks

  5. Avatar Diann G

    I am trying to do something similar but don’t see how to do this 2013… any pointers?

  6. Avatar Arlen M

    I really like this tool in Designer 2010. We just moved to 2013 so I have to use designer 2013, but don’t seem to have this option anymore. Can I do this in 2013?

  7. Avatar Lynn Xi

    Terrific! thanks a lot

Share your thoughts...

Please fill out the comment form below to post a reply.