How to Make image Map and use in SharePoint Online/2016/2013

In this SharePoint Online customization tutorial we will discuss, What is an image map? How to create an image clickable area? How to use an image map in SharePoint online with jQuery and JavaScript? In the same way, we can do an image map in SharePoint 2019/2016/2013.

Image map will be very much helpful when we want to display some specific content on click of a portion of an image.

Video Tutorial: SharePoint image map

If you like this SharePoint image map video, Subscribe to our YouTube Channel, where you can get lots of free SharePoint videos.

What is an image map?

An image map is an image with some clickable areas. When a user clicks on those clickable areas something will happen like showing some contents.

By using image mapping you can define linked areas inside an image. The image will have clickable areas. The areas on the image will define in terms of their x and y coordinates.

Create a clickable image map on a SharePoint Online/2016/2019 site

Recently, I got a requirement to create a clickable image map in my SharePoint Online site. There will be an image on a SharePoint Online home page and when a user clicks on a particular clickable area, some contents from a div will display.

How to create image clickable area?

To work with image map in SharePoint Online or SharePoint 2016, you need to first create an image clickable area.

In this particular image map example, I have 3 divs like:

• Div 1
• Div 2
• Div 3

And I have also 3 divs having some contents presented in the SharePoint page.

When a user clicks on Div 1, then Div 1 contents should show. When a user clicks on Div 2, Div 2 contents should show, and same way for Div 3 also.

The image looks like below, it has 3 square boxes.

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

By using Free Image Map generator, we can create a clickable area of an 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:

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

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

You can see below the coordinates for earch rectangle looks like below:

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>

How to use an image map in SharePoint online?

Now we will see how we can use an 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 the SharePoint 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.

Insert an Image Map into SharePoint Web Part Page

We can insert an image map into a SharePoint web part page like we insert HTML content in a web part page using a script editor web part or content editor web part. This way we can embed the image map code into a SharePoint web page,

Below is the jsom SharePoint code which I have addedn in a script editor web part in SharePoint web part page.

<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 SharePoint Online page and click on the image’s div’s it will show text contents like beow:

Create Image Map using SharePoint Image Maps (3rd Party Tool)

There are also 3rd party tools available to create image maps in SharePoint Online. There is an add-in as SharePoint Image Maps, which allows to create image maps in SharePoint online itself. The tool provides a very easy to use drag and drop editor you can quickly customize, edit and generate image maps for any image without coding.

Simply define selected areas of your image, set actions and display content for when you roll over these areas. Then use the code generator to generate code to insert your Image Maps into any SharePoint Page!

You may like following SharePoint customization tutorials:

• Enable or Disable Notebook Link in SharePoint Online classic and modern sites
• Cascading dropdown in SharePoint 2013/2016/Online using jQuery
• SharePoint Column Validation Examples
• How to use SharePoint Calculated Column in SharePoint 2013/2016/Online + 9 Useful Examples
• SharePoint Left Navigation or Quick Launch Navigation Menu Customization in SharePoint Online/2016/2013
• SharePoint Online Gantt Chart View for Task List
• SharePoint 2016 Open HTML File in Browser Instead of Promoting to Download
• How to change Master Page in SharePoint 2016/2013/Online

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