In this SharePoint tutorial, we will discuss how to create an image map and how we can use in SharePoint online. The same approach will work in SharePoint 2016 and SharePoint 2013.
Here we will see what is image mapping, how to create an image map path and how we can use it in SharePoint online using a script editor web part.
YouTube Channel: https://www.youtube.com/c/EnjoySharePoint
Today I am going to explain how to insert links in an image with respect to the position of the image.
Say for an example: In FB, we will have a tag on photos. In any location or a specific part of the image, we do tag a person. Similarly, we can refer to a link to the image when they click on a specific part of the 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 a 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
You may like the following SharePoint tutorials:
- Configure user profile service application in SharePoint 2016 step by step tutorial
- How to create a custom master page in SharePoint using design manager
- Customize access denied page in SharePoint
- How to create provider hosted app in SharePoint Online step by step
- Connect-SPOService : Current site is not a tenant administration site error in SharePoint Online Office 365 Site
- SharePoint 2013 to Online migration using SharePoint migration tool by Microsoft
- How to make SharePoint site read only?
- Your organization’s policies don’t allow you to share with these users. Go to external sharing in the office 365 admin center to enable it.
- sp.clientcontext is not a constructor
I hope this will be helpful to create and use image mapping in SharePoint Online and sharepoint image with multiple links.
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Out audiences are from the United States, Canada, United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a SharePoint MVP(8 times), check out My MVP Profile. I have also worked in companies like HP, TCS, KPIT, etc.