Image Map in SharePoint Online (Office 365): Use ANY Image to provide Dynamic Information with Links

In the “Image Map in SharePoint Online: Use ANY Image to provide Dynamic Information with Links” article, we would like to demonstrate how to Use ANY Image to provide Dynamic Information with Links other ways we can say how we can create a dynamic image link using the Image Map solutions (SharePoint Add-in and Web Part) without writing any coding. Both the App and web parts are developed using the SPFx framework.

Recently we have got an opportunity to explore the SharePoint image maps product of APPS 365 LTD for our work, which is very handy and pretty cool to use, any user with the required permission from your organization can build up the multiple clickable image map using a single image very quickly. In the below walkthrough we will show you the end-to-end demo right from the installation, and deployment to the use of the Image Map solution.

Key-Highlights: Image Map in SharePoint Online (Clickable link in image)

• Introduction – What is Image Maps?
• Why should we use Image Maps –  Benefits and Features?
• Installation of Image Maps step-by-step process
• Troubleshooting during the installation of the Image Map
• Demo – how to use the Image Maps?

Introduction – What is Image Maps (Image Map in SharePoint Online – Clickable link in image)?

SharePoint Image Maps is the SharePoint Add-in (app) to create interactive images with eye-catching content from within SharePoint. For the uninitiated, an image map is one image with multiple”clickable” hotspots – meaning with a single image we can create multiple hotspots image links very quickly.

Basically, it has two parts:

1. Image Maps (Image Map builder) – it is a SharePoint add-in (app) using this app we can build the image map for an image.
2. Image Map (Image Viewer) – it is a SharePoint modern web part, this web part can be inserted into the modern SharePoint page to display the image map that we have built using the image map builder tool.

So, both the solutions “Image Maps” and “Image Map” are interrelated, while we do the installation of these two solutions, it is recommended to install the “Image Maps” first then the other one “Image Map”.

Note:

• Both the “Image Maps” and “Image Map” solutions have been developed using the SPFx framework, so it is very much compatible with the modern SharePoint pages.

Why should we use Image Maps –  Benefits and Features (Image Map in SharePoint Online – Clickable link in image)?

An image like this with clickable regions can replace the need for a custom page layout design and several text links or buttons on a SharePoint page, making the page look sharper and offering visitors a more intuitive user interface.

With the Apps 365 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!

Images contained within a Picture Library will have the option to create an Image Map directly from the image’s Context Menu. You can even set the content text to be taken from a SharePoint List for easy updates. The generated Image Map is fully responsive and optimized to work across all devices.

In this age of visual culture, visitors spend more time on images than they do reading and acting on text. Images enhanced with SharePoint Image Maps make the most of every chance to communicate your message and boost engagement.

So if you want an easy way to deliver interactive visual content that dazzles, it’s time to take a look at SharePoint Image Maps.

Key features overview of the Image Maps solution (Image Map in SharePoint Online – Clickable link in image)

Below are the key features of the Image Maps solution:

• Save / Update Image Maps
• Multiple Floors
• Zooming Capability
• Responsive and optimized for touchscreen
• Interactive Help System
• Advanced Drag-and-drop Editor
• Polygon, Icon, Rectangle, and Ellipse Shapes
• 150 SVG Icons Included
• Lots of Style and Animation Options
• Customizable Mouseover and Click Actions
• Responsive and Optimized for Touchscreen
• Read ToolTip Content from SharePoint List
• Create Image Map from Images Context Menu (Applies to Images stored in Picture Libraries)
• Run the script on shape click
• Custom Tooltip Position
• Image Backgrounds
• Menu
• Image Map Web Part for easy page inclusion
• Excellent Customer Support!

Installation of Image Maps step-by-step process (Image Map in SharePoint Online – Clickable link in image)

As we have mentioned above there are two solutions for this:

1. Image Maps and
2. Image Map.

In this section, we will walk through how to install the Image Maps app step by step.

Image Maps app installation steps (Image Map in SharePoint Online – Clickable link in image)

Step 1: Get into the App location

Go to this URL – https://appsource.microsoft.com/en-us/product/office/WA104380544 or search with “Image Maps” from the SharePoint app store.

 

Click on the “Get it now” button.

Step 2: Switch to the classic SharePoint Store

On the next screen click on the “SharePoint Store” tab, then click on the Switch to the classic SharePoint Store link.

Step 3: Add the Images Map app in SharePoint Online from the classic SharePoint store (Clickable link in image)

On the next screen, we will land on the app details page.

https://globalsharepoint2020.sharepoint.com/sites/GlobalSharePointDiaryAppCatalog/_layouts/15/storefront.aspx#vw=AppDetailsView,app=WA104380544,clg=0

Click on the “ADD IT” button.

Step 4: App adding confirmation

This SharePoint add-in works in conjunction with another app, which is only available from the provider. This requires installation on your environment outside of the Microsoft Office Store processes due to the level of required permissions. A tenant administrator will need to deploy this specific app to the tenant manually so that it can be installed in your environment. When apps are installed outside of the Microsoft Office Store, they may bypass any, and all, safety and security checks provided by Microsoft.

If you have not done so already, it is recommended that you establish contact with the provider before proceeding with the installation. Consider trying this app on a separate SharePoint Tenancy before installing it on your primary SharePoint site(s).

Click on the “Continue” button.

Step 5: Getting Details of the new app

Click on the “Purchase” button.

Note:

• It is just a “Purchase” button, it will not ask for any financial card details. 🙂

Step 6: You just got this app for everyone in your organization

Next, we will get into this screen.

Step 7: Trust the Image Apps

Do you trust Image Maps?

Let it create or delete document libraries and lists in this site collection. Let it access basic information about the users of this site. View the Terms & Conditions from APPS 365 LTD View the privacy statement from APPS 365 LTD

Click on the “Trust it” button and wait for a couple of seconds.

Step 8: The image Maps app got added to the site content

We can see that the “Image Maps”app is added to the site, we can see it from the site content page.

By now we have completed adding the “Image Maps” app on the SharePoint Online site, next, we will move on to adding the  “Image Map” solution (web part).

Image Map app (web part) installation steps – Image Map in SharePoint Online (Clickable link in image)

Step 1: Get into the Image Map App location

Go to this URL – https://appsource.microsoft.com/en-us/product/office/WA200002033 or search with “Image Map” from the SharePoint app store.

Click on the “Get it now” button.

Step 2: Add Image Map App to App Catalog site

Click on the “SharePoint Store” tab.

Click on the “Add to app catalog” button.

Step 3:

The app you’re about to enable will have access to data by using the identity of the person using it. Enable this app only if you trust the developer or publisher.

This app gets data from:

• SharePoint

Apps Availability

• Only Enable this App – Selecting this option makes the app available for site owners to add from the My apps page
• Enable this app and add it to all sites

Let’s go with the default selection – Enable this app and add it to all sites

Then click on the “Add” button.

Step 3: Image Map app added to all sites in the tenant

Troubleshooting the issue from the installation of the Image Maps app (Image Map in SharePoint Online)

If we try to add the “Image Maps” app in SharePoint Online using the global administrator role and in SharePoint On-Premise using the system account, we will not be able to add the “Image Maps” app, in that case, we will get the below error:

We can see this message after clicking on the “Purchase” button on the “we are getting details of your new app….” page.

The resolution of the above issue is here – [Fixed]: Everything is fine, but we had a small problem getting your license.

Demo – How to use the Image Map in SharePoint Online (Clickable link in image)?

As part of the Image Maps demo – basically, there are two steps. First, we need to create the image hotspot for the selected image, then we need to create a modern page where need to insert the Image Map web part to display the Image Maps.

We can create the Image Hotspot using the image map builder app (tool), either directly opening the Image Maps app or selecting an image from the picture library, then we can select the Image Maps App.

1. Open the Image Maps app from the SharePoint Online picture library (Clickable link in image)

Select an image from the picture library -> Click on the three dots from the ribbon menu (picture property) -> Click on the “Image Map” app.

Note:

• The above “ImageMapsImages” picture library along with the sample image “SPImageMaps.jpg” was added by the “Image Maps” app itself automatically. So if you want to add any custom images of your need, you can upload them to this picture library.

Once we click on the “Image Map” app, the image map builder tool will be opened (as shown below):

 

2. Open the Image Maps app from the SharePoint Online site content page (Clickable link in image)

Click on the “Image Maps” app from the site content page.

On the next page, we can see Image Map builder screen.

Click on the “Open Image Map Builder” button.

It will open the image Map Builder tool.

Here already, we had created an image map, that we have loaded here.

In the above image, we can select any region of the image and create a dynamic navigation link. Here in this demo, we have created two spots (spot0 and spot1) and configured the navigation for the proof of concept. Here we have just configured target navigation for the particular image spot, this Image Map is not limited to that, we could lot more things with just a few clicks.

Steps to create spot link:

1. Select the region from the image (spot).
2. Expand the Action Pane from the right-side panel
3. Select “Follow Link” from the click action dropdown menu.
4. In the Link URL text box – type your URL for the image spot

Rest all, keep it as it is its default. Continue the same process for a couple of image spots to test it more accurately.

Steps to create a new Image Map (Clickable link in image)

Click on the “New” button from the ribbon menu of the image map builder tool.

Then we can see the Image Map creation screen.

Here we need to pass the below:

• Image Map Name – we can give our own name.
• Select the template as Image, Country, or Blank
• Select the picture library – here the list of picture libraries will be listed from your site where the “Image Maps” app is installed.
• Based on your picture selection, select the image from the select image dropdown selection.

By now we have completed, creating the Image Map, in the next final step, we will add the “Image Map” web part to the modern SharePoint Page, and inside that we will display the Image Map and Country Map.

Add Image Map SPFx web part to the page (Clickable link in image)

Create a modern new page to the site where you want to display the Image Map and Country Map, then add the “Image Map” web part in two sections – one for the “Image Map” and another for the “Country Map”.

Already, we have added this “Image Map” web part into the two-section, and now we will show you the configuration.

Open the Image Map configuration.

We need to pass the below configuration parameters:

• Web Part Title
• Select Image Map Site
• Select Folder
• Select Image Map Name

Follow, the same process for the Country Map configuration – here only the difference is, in the “Select Image Map Name”, we need to select the “Country Map”.

Once we configure the Image Map web part for the Image and Country Map, we can see the below:

The image is displayed on the SharePoint Online Page (Clickable link in image)

Notes:

• We can see that there are two hotspots for the same image, if we click on the hotspot link, a new link (which you have configured in the Image Builder app) will be opened in the new tab.

Demo: Image Map in SharePoint Online (Create clickable image online – Clickable link in image)

 

Conclusion: Image Map in SharePoint Online (Clickable link in image)

Finally, what we could say is, that it is a great product from APPS 365 LTD which is worth trying, it has 14 days trial version with full features, if you are happy with this, you can buy it after the trial.

 

 

About Post Author