Insert multiple links on single image of SharePoint pages

InfoPath alternatives for form designing SharePoint

Today I am going to explain how to insert links in an image with respect to a position of the image. Say for an example: In FB, we will have tag on photos. In any location or specific part of the image we do tag a person. Similarly we can refer a link to image when the click on specific part of image.

To implement this first,

1. Create a site page in the SharePoint 2013 site.

2. Insert an image in the page.

Then we have to write code to display links on the page.

3. Open the page in designer and give a propety usemap=”#country” in the image tag.

ex:

<img alt=”globe.png” src=”/teams/CreditPoint32/1.5.2Site/SiteAssets/SitePages/Test2Page/globe.png” usemap=”#country” style=”margin:5px;” />

Now add rectangle, circle and polygon shape of links to cove a part in the image.

In the above image we have countries. To insert links to specific country when we click on the “ASIA” or any other country in the image

Add rectangular type of mapping in the page (Below <img> tag

<area shape=”rect” value=”multireg” coords=”69,20,270,79″ href=”http://www.google.com”>

<area shape=” rect ” value=” america ” coords=”12,265,80,80″href=”http://www.google.com”>

<area shape=” rect ” value=” asia ” coords=”332,260,255,80″href=”http://www.google.com”>

<area shape=”rect” value=”europe” coords=”69,320,270,268″ href=”http://www.google.com”>


This we can find hot spots and give links to navigate the location. Hope this will help you in your development

Thank you for reading this article.


You May Also like the Following SharePoint Online Tutorials:

About jayabharathi

The turning point in the process of growing up is when you discover the core of strength within you that survives all hurt.

View all posts by jayabharathi →

Leave a Reply