Image Map in SharePoint

In this SharePoint tutorial, I will explain how to work with image map in SharePoint, how to work with SharePoint clickable image.

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

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 content.

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

Create a clickable image map on a SharePoint

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 an image clickable area?

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

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

  • Div 1
  • Div 2
  • Div 3

I also have 3 divs having some content presented on 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 the same goes for Div 3 also.

See also  How to Create a Board View in a SharePoint Online List?

The image looks like the one below; it has 3 square boxes.

image mapping sharepoint online
image mapping sharepoint online

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

Using the 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 website by clicking on the “Load Image from Website” button.

Once you upload, you can see like below:

sharepoint image map

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:

image map sharepoint
image map sharepoint

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 each rectangle looks like below:

sharepoint clickable image
sharepoint clickable image

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 content 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.

See also  How to Use SharePoint Group Calendar Web Part?

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 SharePoint script editor webpart.

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 added in a script editor web part in the 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 saved the SharePoint Online page and clicked on the image’s div’s it will show text contents like below:

image map in sharepoint
image map in sharepoint

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.

See also  Document Co-Authoring in SharePoint Online

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.

I hope this tutorial will be helpful in implementing image mapping in SharePoint.

You may also like:

  • I have tried this with modern pages? I am looking for assistance on that adding this exact solution on modern pages using the Embed web part.

  • I love this article, it was easy to follow, but unfortunately did not work for me. Is this supposed to work on a classic page on a modern Sharepoint site? If yes, please let me know if there are any extra steps required, the javascript is not running at all. I am not very script savvy, so I’ve literally followed the layout of your script to the letter.

  • When I enter the second part of the script into the script editor ( […]), the text of Div2 is displayed only ( This is our Div 2 content which will display when we click on Div 2 rectange in the Image. )
    What did I do wrong?

  • >