We help IT Professionals succeed at work.

Hyperlinks in Sharepoint

Last Modified: 2012-05-11
I have tried numerous ways to embed hyperlinks into an image in word and export out to use as a logo with hyperlinks in sharepoint. I have looked on the web and there doesn't seem to be an easy way. The logo I want to use is attached. I want to be able to click on to one of the circle and it link to something. With websites you can add hotspots can i do this somehow in sharepoint?
Watch Question

Most Valuable Expert 2011
Awarded 2010


If this is just one image file, there is no SharePoint tool that I'm aware of that will allow you to link to different targets for different areas of the image.

But, on the other hand, this can be achieved with simple HTML code. You can use the Map tag to do that.

It's rather unfortunate that the "hotspots" are circles instead of rectangles, and that they overlap each other, because this will cause problems when clicking an overlap.

A rather rough hotspot map of the image and the code to link to different files for each  bubble looks something like this:

<img name="Capture" src="Capture.jpg" width="545" height="602" border="0" id="Capture" usemap="#m_Capture" alt="" />
<map name="m_Capture" id="m_Capture">
<area shape="rect" coords="34,168,165,282" href="Drainage_Link" alt="" />
<area shape="rect" coords="46,291,160,393" href="ProjectManagement_link" alt="" />
<area shape="rect" coords="106,376,210,486" href="Environmental_link" alt="" />
<area shape="rect" coords="213,392,315,513" href="Rehabilitation_link" alt="" />
<area shape="rect" coords="294,354,420,470" href="Transportation_link" alt="" />
<area shape="rect" coords="377,282,481,377" href="Materials_link" alt="" />
<area shape="rect" coords="374,181,478,272" href="Monitoring_link" alt="" />
<area shape="rect" coords="321,93,420,181" href="Geotechnical_link" alt="" />
<area shape="rect" coords="211,74,314,162" href="Structureal_link" alt="" />
<area shape="rect" coords="112,101,216,188" href="Bridges_link" alt="" />

Open in new window

Edit the SharePoint html source and include this code. Replace the links after the href= with the actual URLs of the targets.

cheers, teylyn
Top Expert 2011

Another option would be to use floating div's with hyperlink (href) tags.
Existentially you will have to use Content editor webpart with html

If you iinsert the image in the Sharepoint page, then from the menu bar choose View/Toolbars/Pictures, you can apply hotspots to your image.  One of the options is a circular hotspot.  

Hope that helps.


Hi, I have just tried to look for the View/Toolbars/Pictures on the menu and cannot find it. I have attached screen shot. If I have access to this area this seems the easiest solution.

Sorry, I didn't realize you were working with 2010. I'm not sure where the toolbars are located in 2010 - in 2007, they're grouped under View.  Can you locate any of the toolbars, like the master page toolbar?
Most Valuable Expert 2011
Awarded 2010

@TEEDA, that's SharePoint Designer you're talking about, not the SharePoint web user interface. That would account for the difference.

Vipaman, if you edit the page with SharePoint Designer 2010, select the picture, the you will see a Picture Tools ribbon with a hotspot button, from where you can insert circular hotspots.

SharePoint Designer 2010 is a free download from Microsoft, but your company may have restrictions in place about who can use it to manipulate SharePoint sites.

cheers, teylyn


Hi Teylyn, you are right. We have been told we cannot use it. I had just found out how to do it. I am going to see if I can get your HTML to work tomorrow. How did you manage to work the co-ordinates out? Is there an easy way. My reason for asking is the logo may change as user demands increase although I am trying to limit this. Intrigued really.
Most Valuable Expert 2011
Awarded 2010
This one is on us!
(Get your first solution completely free - no credit card required)


Added code and don't quite know what i am doing to be honest now.  html code
When i paste it into sharepoint, i get the original image underneath (which i guess i can delete eventually) and then a new image above with circles offcentre (this is in edit mode). Now the circles offcentre i understand as i only sent part of the original logo and thus the size is wrong. To prove the code however I put a path into the code for the main image and then a link for the drainage circle. I can't seem to find anywhere on the screen where there is a hyperlink. I edited the code in notepad as i know I have had problems in word before with hidden charaters. Is the code formatted right? It doesn't seem to show line by line. Obviously something daft I have done. I will add the full logo in the next thread. Saying that it is looking very promising!


full logo uploaded and points increased due to complexity. Thanks in advance


computer froze!


Realised my stupity put line numbers in and it was corrupting data. Final code is.

<p><img src="C:\Users\PAULWA~1\AppData\Local\Temp\NamoWe\logoexported.jpg" width="856" height="510" border="0" alt="logoexported.jpg" usemap="#ImageMap1"></p>
<map name="ImageMap1">
<area shape="rect" coords="452, 103, 527, 140" href="http://bridge">
<area shape="rect" coords="554, 73, 629, 101" href="http://struc">
<area shape="rect" coords="652, 112, 744, 138" href="http://geo">
<area shape="rect" coords="713, 193, 802, 221" href="http://monitoring">
<area shape="rect" coords="718, 295, 807, 330" href="http://materials">
<area shape="rect" coords="651, 379, 757, 420" href="http://transportation">
<area shape="rect" coords="553, 417, 636, 461" href="http://rehabilatation">
<area shape="rect" coords="440, 379, 530, 415" href="http://environmrntal">
<area shape="rect" coords="384, 285, 469, 333" href="http://project">
<area shape="rect" coords="388, 182, 465, 232" href="http://drainage">

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.