The Image map component makes an image clickable on your SharePoint pages. You place interactive areas on the image, pins, rectangles, ellipses or freeform shapes, that open a link or show a tooltip. Each area keeps its place on the image, whatever the screen width.

This article describes the web part's use cases, how to get started, its settings, editing the interactive areas and the best practices to follow.

📋 Contents

1. About the component
2. Add the component to your page
3. Choose the image fit
4. Configure the component
5. Place and set up the interactive areas
6. Enter and format the texts on the page
7. Best practices
8. What changes from the previous version

1. About the component

Image map is made of an image, placed in the component's frame, and the interactive areas placed on it. Your visitors hover over an area to read its tooltip and click it to follow its link. An optional title can show above the image.

Use cases

• Present an office or site floor plan, with a link to each department.
• Show a map of your locations, with a pin for each country or city.
• Explain a process or product diagram step by step, with a tooltip on each part.
• Organize your intranet visually: each area of the image leads to the right site.

Two places to configure

Image map is set up in two places:

• The configuration panel holds the image, how it fits in the component, the height, the background, the appearance, the title and the visibility.
• Interactive area editing, which opens full screen from the panel, holds the areas, their links and their tooltips.

The tooltip texts, like the component's title, are typed directly in the bubble, on the image (see part 6).

2. Add the component to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the component, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - Image map, in the "Text, media, and content" category.
4. The component is added where you want it, with its default values.

A newly inserted Image map shows a default image, in full, in a Medium height component (250 px) on a white background. It doesn't carry any area yet and doesn't show a title.

3. Choose the image fit

The image fit decides how the image fills the component. It's set in the Design tab, Layout section, with the Image fit setting.

With Fill web part, the Set focal point button appears: it opens a window where you drag the target onto the area of the image to keep visible, whatever the framing.

⚠ With Fill web part, the areas that extend beyond the frame are cropped with the image: your visitors no longer see them, or only see part of them.

⚠ The Set focal point button is disabled as long as the component shows the default image, or if the image can't be found. Choose your image first.

💡 Interactive area editing always shows the whole image, whatever the image fit. You can therefore place areas on a part of the image that the frame crops on the page.

4. Configure the component

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies to the page immediately.

4.1 Design tab

The Design tab holds, in this order, the Layout (see part 3), Web part height, Background and Appearance sections.

Web part height

• Height (px) appears when you choose Custom.
• The section doesn't appear when the image fit is Fit web part to image: the image then gives the component its height.

Background

• Color: the background takes the chosen color. Texts without a color of their own placed on this background automatically switch to black or white, whichever contrasts best.
• Image: the background shows the chosen image, cropped around its Focal point. Alternative text appears when the image isn't marked as decorative.

💡 The background mostly shows with Whole image, around the image when its proportions differ from the component's.

⚠ Don't confuse the background image with the component's image, the one that carries the areas: it's chosen in the Content tab, Image section.

Appearance

The Appearance section sets the component's border, shadow and corner radius.

By default, the component follows your site's Jint theme: the section shows "Appearance values come from the theme. The theme is set in Jint Portal." and its settings are disabled. Click Customize to change them. To go back to the theme, click Reset from theme.

💡 The image's corners are rounded along with the component, with a radius equal to the component's corner radius minus its inner padding. As long as the corner radius doesn't exceed this padding, the image keeps square corners.

4.2 Content tab

The Content tab holds, in this order, the Title, Accessibility, Image and Interactive areas sections.

Title

Turn on Show title to show a title above the image. The title is entered and formatted directly on the page (see part 6). As long as you haven't typed anything, you see the placeholder text "Image map"; your visitors don't see any title.

Accessibility

The Accessibility section appears when Show title is on. It automatically measures the contrast of the title with its background, without you having to click it. It shows the Ratio and an Overall readability: Excellent, Good or Insufficient. If the contrast is insufficient, click Fix: each insufficient color of the title is replaced by the closest palette color that offers enough contrast.

• As long as the title is empty, the section shows "Enter a title on the page to check its contrast."
• On an Image background, the section shows "Contrast can't be measured for this text."

Image

• Choose an image opens the SharePoint file picker. The panel reminds you of the recommended format: "Recommended: JPG, PNG or WebP, at least 1920 × 1080 px, under 1 MB."
• Alternative text appears when the image isn't marked as decorative: "Alternative text is for people who are blind or have low vision. Briefly describe why this image matters to the page." Left empty, the image is treated as decorative by screen readers.
• Remove image puts the default image back, without confirmation.
• The image's focal point isn't set here, but in the Layout section, with Fill web part (see part 3).

⚠ Unlike the background image, the component's image isn't marked as decorative by default: remember to fill in its Alternative text.

⚠ When you change the image, each area keeps its place on the new image. If the new visual differs, check the position of your areas in interactive area editing.

⚠ If the image is deleted or moved, the component shows a white background instead, with no area. The panel and interactive area editing show "Image not found: it may have been deleted or moved. Choose another one." and the editing tools are disabled. A visitor who isn't allowed to read the image also sees a white background.

Interactive areas

The Interactive areas section tells you how many areas the image carries: "No areas yet.", "1 area defined." or the number of areas defined.

Click Set up your image map to open interactive area editing, full screen (see part 5).

4.3 Visibility tab

Audience

Turn on Custom audience to restrict the component to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

⚠ If you turn on Custom audience without choosing anyone, no one sees the component anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the component, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.

5. Place and set up the interactive areas

5.1 The editing screen

In the Content tab, Interactive areas section, click Set up your image map. Interactive area editing opens full screen:

• at the top, the Back to page, Undo, Redo, Zoom out, Zoom in and Exit editing buttons;
• on the left, the tools to place areas;
• in the center, the whole image, with its areas;
• on the right, the list of areas, or the settings of the selected area.

At the top of the list, you find the image settings: Choose an image and Alternative text.

Each change shows on the page right away, with no saving step. To go back to the page, click Back to page or Exit editing.

• Undo and Redo undo and redo your last actions on the areas.
• Zoom out and Zoom in move from one step to the next: 50, 72, 100, 140 and 200%. The screen always opens at 100%.

⚠ Undo only goes back to when the editing screen was opened. Once back on the page, you can no longer undo the actions made before.

5.2 Place an area

Four tools are offered on the left, one per shape: Pin, Rectangle, Ellipse and Freeform. When the screen opens, no tool is selected.

1. Click a tool to select it. Click it again to deselect it.
2. Place the area on the image:

• Pin, Rectangle or Ellipse: click the image where you want the area.
• Freeform: draw the outline of the area on the image, then release.

1. The placed area is selected and its settings show on the right. The tool is deselected: select it again to place another area.

As long as there's no area, the list shows "Choose a tool on the left, then click the image to place a first area."

• An area that would extend beyond the image is brought back entirely inside it.
• A freeform drawing that forms a single segment doesn't place any area.
• A pin always keeps the same size, whatever the size of the image.

💡 With a tool selected, clicking an existing area places a new area on top of it. When two areas overlap, the last one placed shows on top.

5.3 Select, move and resize an area

• Select: with no tool selected, click the area, or its row in the list. To deselect, click an empty part of the image.
• Move: with no tool selected, drag the area. It's selected at the same time.
• Resize: drag a handle of the selected area. Only rectangles and ellipses can be resized.

An area stops at the edge of the image: it can't go outside it.

The list of areas

The list is titled Areas, followed by the number of areas. It shows one row per area, in the order you placed them, with the icon of its shape and its name. The name is the title of the area's tooltip; without a title, it's the shape followed by its rank, for example "Rectangle 2".

Badges sum up what each area does:

5.4 Set up an area

When an area is selected, its settings replace the list. At the top, the area's name and two buttons: Back to area list and Delete area.

⚠ Delete area deletes the area without confirmation. If you make a mistake, click Undo.

Appearance

💡 A hidden area shows nothing to your visitors, but keeps its link and its tooltip. You see it with a dotted outline in edit mode. It's useful to make part of the image clickable without covering it.

Action

• Link accepts a full address, a path starting with /, an anchor starting with #, an email address or a number starting with tel:. The address applies when you leave the field. A domain name typed without https:// is completed automatically, and so is an email address, with mailto:.
• If the address isn't accepted, the field tells you: "This type of link isn't allowed.", "The address can't contain spaces." or "This address doesn't seem valid."
• Open in: A new tab opens the link in a new browser tab; The same tab opens it in place of the page; A modal window and A panel show it over the page, without leaving it (see part 5.6).
• Panel width appears when you choose A panel.

⚠ A link to an email address or a phone number always opens as with A new tab, and a link to an anchor always as with The same tab, whatever the Open in choice.

Tooltip

When it's on, the area's tooltip shows on the image, ready for typing, and the settings remind you: "Type the text directly in the tooltip, on the image, including its formatting."

5.5 Write the tooltip

When an area whose tooltip is on is selected, its bubble shows, ready for typing. It has two texts:

• the title, on one line, 16 px and bold by default, with the placeholder text "Tooltip title";
• the text, on several lines, 12 px by default, with the placeholder text "Tooltip text".

Click either one to type it and format it with the text toolbar (see part 6).

The tooltip title also serves as the area's name in the list, and as the header of the link preview when the link opens in a modal window or a panel.

5.6 What your visitors see

The tooltip

When a visitor hovers over an area whose tooltip is on, the tooltip shows and points to its area. It's placed above the area; if there isn't enough room, below; if there isn't enough room on either side, on the side with the most room. It shifts to stay within the image and, if it's taller than the available room, extends beyond the image onto the page.

⚠ A tooltip whose title and text are both empty doesn't show. A title or a text left empty doesn't show either.

A freeform area only reacts to hovering and clicking on its shape, never on the rectangle around it.

The link

When a visitor clicks an area that has a valid link, the link opens according to the Open in choice.

With A modal window or A panel, the linked page shows in a preview, without leaving the page:

• as a modal window, in the center of the screen, over a dark overlay;
• as a panel, against the right edge of the page, at the chosen width;
• on mobile, the preview takes the full width of the screen, as a modal window as well as a panel.

The header of the preview shows the title of the area's tooltip, otherwise the link's address. The Open in a tab button opens the page in a new tab. To close the preview, the visitor clicks Close or outside the preview.

⚠ Some sites refuse to show inside another page. In the preview, the visitor then sees the browser's error page. For these links, choose A new tab.

On a touch screen

⚠ On a touch screen, touching an area that has a link opens the link, without showing the tooltip. The tooltip only shows on touch for an area without a link. Touching elsewhere closes it.

6. Enter and format the texts on the page

The component's title and the tooltip texts are entered directly on the page, not in the configuration panel.

The title

Once Show title is on, click the title: it becomes editable and a toolbar shows above it. By default, the title is H4, black, 20 px and bold.

💡 As long as the component follows the Jint theme, the title's toolbar shows the theme banner instead. Click Customize to format the title.

The tooltips

In page edit mode, click an area whose tooltip is on: the tooltip opens, ready for typing. Click outside the tooltip and its toolbar to close it. You can also write the tooltip in interactive area editing (see part 5.5).

The text toolbar

The toolbar sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. The Reset formatting button restores the original style.

• Pasted text loses its original formatting.
• The texts show exactly as you entered them, without automatic translation.

7. Best practices

Choose the right image, and keep it

Choose an image that's readable even without areas, in the recommended format, and stored in a place your visitors are allowed to read. Once your areas are placed, avoid changing the image: the areas stay in their place, not on the content of the new visual.

Don't crop anything on a map or a floor plan

For a map or a floor plan, prefer Whole image or Fit web part to image: no area is cropped, at any screen width.

Give each tooltip a title

A tooltip title names the area in the list, which makes it easier to read, and serves as the header of the link preview.

Check the badges before leaving editing

Before going back to the page, go through the list of areas: an area marked incomplete does nothing for your visitors. Give it a link or a tooltip, or delete it.

Think of visitors on mobile

On a touch screen, the tooltip of an area that has a link doesn't show. If the tooltip's information matters, don't keep it for an area that carries a link.

Describe the image

Fill in the image's Alternative text, for people who use a screen reader.

8. What changes from the previous version

If you used the previous version of the component (see the article Image map component):

• The component is called Jint - Image map in the catalog, and sits in the "Text, media, and content" category.
• The panel is organized in three tabs, Design, Content and Visibility.
• The component sizes and the option to fit the image become two settings: Image fit, with three choices including the new Fill web part and its focal point, and Web part height (Small, Medium or Custom).
• Choose an image opens the SharePoint file picker.
• New settings: the image's Alternative text, the title's Accessibility section, the Background, the Appearance linked to the Jint theme and the Visibility tab.
• Area editing opens with Set up your image map and closes with Exit editing or Back to page. Your changes still apply without saving.
• The shapes become Pin, Rectangle and Ellipse, joined by the new Freeform.
• No more tool needed to move an area: drag it directly. Rectangles and ellipses are resized with their handles.
• New: Undo and Redo, zoom, the list of areas with its badges and the Area color.
• The link opens, as you choose, in A new tab, The same tab, A modal window or A panel: the last two show the linked page without leaving the page.
• The tooltip's title and text are typed and formatted directly in the bubble, on the image, with the text toolbar.
• As before, an area can be made hidden.