Skip to main content
Mozzaik365 becomes Jint — new identity, same mission. For more information, click here

Search

Welcome to the support center

Image Map Web part

Support Jint
  • Updated

Web part overview

In order to facilitate navigation on your site, what could be better than a visual and interactive web part allowing you to navigate directly to the site of a country or a service by physically clicking on it? This is what the Image Map web part offers you, an image to be placed in your SharePoint pages with clickable zones allowing you to distribute information or to refer to links. This article describes the functionalities and use cases of the Image Map web part. 

mceclip0.png

User functionality

The Image Map is an interactive web part where the contributor can add pinpoints with information and links to images, to graphically share information, trainings or organizations and create an easier navigation on the site. This way, everyone can access the right information quickly and easily by simply clicking on the pinpoints on the Image Map. 

Use cases

This web part can be used to create interaction in several situations:

  • Create interactive navigation with an image that represents the organization of your company and your digital workplace: the different departments, product lines, or services. 
  • Add business information to describe your processes and products. 
  • Place points of interest on a map.
  • Educate your employees about a product or service by adding texts or links with explanations. 
  • Centralize information about a subject in one place.

mceclip0.png

Project Process highlighted with the Image Map web part

Add the web part

  1. Open the edit mode of the SharePoint page by clicking on edit at the top right of the page,
  2. Position the mouse over or under an existing web part, and click the "+" button to open the web part catalog. 
  3. Search or scroll down in the catalog to select the Image Map web part in the category "Lists, documents and libraries". 
  4. The web part is added to the desired location. 

Web part settings

There are four categories of available settings for the Image Map web part:

  1. Layout
  2. Display settings
  3. Image Map configuration

mceclip1.png

Settings for the Image Map

1. Layout

  • Choose the size of the web part by clicking on: Small, Medium or Large. It corresponds to standard Jint's web part Size you can use to align web part in your pages.
  • Personalize the size of the web part by adding the amount of pixels under "Customize". 
  • Adapt automatically the height web part to the image by activating "Fit web part to image". 

mceclip3.png

2. Display settings

  • Choose to display the title of the web part by activating "Show WebPart title". 
  • Write a title in the text box. 

mceclip4.png

3. Image Map configuration

3.1 Select an image

  1. Add an image by clicking on "Select an image". 
  2. Select an image from three different options:
    • Recent: choose an image that was recently used. 
    • Stock Images: search for a stock image by adding a key term in the search bar, or choose a stock image from the recommended categories.  
    • Upload:  import an image from your device by clicking on "Choose file". 

Once the image is selected, you can insert the image by clicking "Insert". If you wish to abandon the selection of images, click on "Cancel".

If you wish to change the image click on "Edit image" or delete the image by clicking on the trashcan icon. 

mceclip5.png

3.2 Set your Image Map

To make your selected image interactive, click on the “Set Your Interactive Image” button. A new window will open where you can configure the interactive image:

 

1. Choose the type of element you want to add:

    • A point on the image

    • Clickable areas in the shape of a rectangle or ellipse


Image Interactive - Bouton.png

2. Insert elements onto the image:
Click the icon that corresponds to your choice.

 

3. Place the points or clickable areas:
Once activated, you can click anywhere on the image to position them. You can then configure each element.


4. Move points or clickable areas:
Click the arrow icon to enable move mode. Then click and drag the element to place it exactly where you want.


5. Configure a point or clickable area:
Switch to selection mode and click the element. The configuration menu will appear on the right-hand side, where you can:

    • Delete the element (trash icon)

    • Add a link under “Add a direct link”. You can also choose to open the link in a new window

    • Toggle the visibility of a clickable area

    • Add a tooltip with a title and a paragraph (you can adjust the title size)

6. Save and exit editing mode:
Once you’re done setting up your interactive image, click “Exit Editing”. All changes are saved automatically.

Image Map - Settings.png

 

 

Examples of layout: 

 

 

Image Map - Result 01.png

Image_Map_maj.png

Related to

Comments

0 comments

Please sign in to leave a comment.