How to make image map and use in SharePoint online or SharePoint 2016/2013?

image mapping sharepoint online

In this post we will discuss:
1- What is image mapping?
2- How to create image clickable area?
3- How to use image map in SharePoint online?

1- What is image mapping?

By using image mapping you can define linked areas inside a image. The image will have clickable arears.

2- How to create image clickable area?

Here I have an image like below, it has 3 square boxes.

image mapping sharepoint online
image mapping sharepoint online

First thing is we need to create the clickable area of the image.




For this open the URL: https://www.image-map.net/

There upload the image by clicking on the “Select Image from My PC” or you can also load images from a web site by clicking on the “Load Image from Website” button.

Once you upload you can see like below:

Create image map html
Create image map html

Here in the Shape choose Rect and then draw the rectange in the image. Similarly you can click on +Add New Area button for other two rectangles. Finally it looks like below:

sharepoint online create and use image mapping
sharepoint online create and use image mapping

And then finally click on Show Me The Code! button which will generate the codes like below. Here the coords attribute is important.

sharepoint 2013 create and use image mapping
sharepoint 2013 create and use image mapping

Copy the full code.

<!– Image Map Generated by http://www.image-map.net/ –>
<img src=”image-mapping-sharepoint-online.png” usemap=”#image-map”>

<map name=”image-map”>
<area target=”” alt=”” title=”” href=”” coords=”37,35,363,104″ shape=”rect”>
<area target=”” alt=”” title=”” href=”” coords=”41,163,365,225″ shape=”rect”>
<area target=”” alt=”” title=”” href=”” coords=”43,275,365,351″ shape=”rect”>
</map>

3- How to use image map in SharePoint online?

Now we will see how we can use image map in SharePoint online? Here in this particular demo, we will show some contents on each div click. Like if we will click on Div 1 in the image it will show us Div 1 content, if we will click on Div 2 it will show Div 2 content and finally if we click on Div 3 it will show Div 3 contents.

For this I have put the image inside site assets library and we can give the image path from site assets document library.

Here we have added <ul> and <li> tags.

 




We have also added 3 divs where we have added the contents. All these I have added inside a script editor web part.

<script type=”text/javascript” language=”Javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

<img src=”https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/image-mapping-sharepoint-online.png” usemap=”#image-map”>

<div id=”myImagemapdiv”>
<map name=”image-map”>
<ul><li class=”r1″>
<area target=”” alt=”” title=”” href=”#” coords=”37,35,363,104″ shape=”rect”>
</li></ul>
<ul><li class=”r2″>
<area target=”” alt=”” title=”” href=”#” coords=”41,163,365,225″ shape=”rect”>
</li></ul>
<ul><li class=”r3″>
<area target=”” alt=”” title=”” href=”#” coords=”43,275,365,351″ shape=”rect”>
</li></ul>
</map>
</div>

<script type=”text/javascript”>

$(document).ready(function () {
$(‘#mydivid1’).hide();
$(‘#mydivid2’).hide();
$(‘#mydivid3’).hide();
$(‘#myImagemapdiv’).hide();

$(“ul”).on(‘click’, ‘li.r1’, function(){
$(‘#mydivid1’).show();
$(‘#mydivid2’).hide();
$(‘#mydivid3’).hide();
});

$(“ul”).on(‘click’, ‘li.r2’, function(){
$(‘#mydivid2’).show();
$(‘#mydivid1’).hide();
$(‘#mydivid3’).hide();

});
$(“ul”).on(‘click’, ‘li.r3’, function(){

$(‘#mydivid2’).hide();
$(‘#mydivid3’).show();
$(‘#mydivid1’).hide();

});

});

</script>

<div id=”mydivid1″>
This is our Div 1 content which will display when we click on Div 1 rectange in the Image.
</div>

<div id=”mydivid2″>
This is our Div 2 content which will display when we click on Div 2 rectange in the Image.
</div>

<div id=”mydivid3″>
This is our Div 3 content which will display when we click on Div 3 rectange in the Image.
</div>

Once we have save the page and click on the image’s div’s it will show text contents like beow:

sharepoint online create and image mapping step by step tutorial
sharepoint online create and image mapping step by step tutorial

You can check the video tutorial on how to create image map and use in SharePoint online.

Hope this tutorial will be helpful to implement image mapping in SharePoint online and also in SharePoint 2016 or SharePoint 2013.


About Bijay Kumar

I am Bijay from Odisha, India. Currently working with a reputed organization in Bangalore. I am Microsoft Office Servers and Services (SharePoint) MVP (4 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.

View all posts by Bijay Kumar →

Leave a Reply

Your email address will not be published. Required fields are marked *