Le composant Image interactive rend une image cliquable sur vos pages SharePoint. Vous posez sur l'image des zones interactives, épingles, rectangles, ellipses ou formes libres, qui ouvrent un lien ou affichent une infobulle. Chaque zone garde sa place sur l'image, quelle que soit la largeur de l'écran.

Cet article décrit les cas d'usage du composant WebPart, sa prise en main, son paramétrage, l'édition des zones interactives et les bonnes pratiques à suivre.

📋 Sommaire

1. Présentation du composant
2. Ajouter le composant à votre page
3. Choisir l'ajustement de l'image
4. Paramétrer le composant
5. Poser et régler les zones interactives
6. Saisir et mettre en forme les textes sur la page
7. Bonnes pratiques
8. Ce qui change par rapport à la version précédente

1. Présentation du composant

L'Image interactive se compose d'une image, posée dans le cadre du composant, et des zones interactives placées dessus. Vos visiteurs survolent une zone pour lire son infobulle et cliquent dessus pour suivre son lien. Un titre facultatif peut s'afficher au-dessus de l'image.

Cas d'usage

• Présenter un plan de bureaux ou de site, avec un lien vers chaque service.
• Afficher une carte de vos implantations, avec une épingle par pays ou par ville.
• Expliquer un schéma de processus ou de produit, étape par étape, avec une infobulle sur chaque partie.
• Organiser visuellement votre intranet : chaque zone de l'image mène au bon site.

Deux endroits pour configurer

L'Image interactive se règle à deux endroits :

• Le panneau de configuration porte l'image, son ajustement dans le composant, la hauteur, l'arrière-plan, l'apparence, le titre et la visibilité.
• L'édition des zones interactives, qui s'ouvre en plein écran depuis le panneau, porte les zones, leurs liens et leurs infobulles.

Les textes des infobulles, comme le titre du composant, s'écrivent directement dans la bulle, sur l'image (voir la partie 6).

2. Ajouter le composant à votre page

1. Ouvrez le mode édition de la page SharePoint en cliquant sur Modifier en haut à droite.
2. À l'emplacement souhaité, cliquez sur le bouton « + » pour ouvrir le catalogue de composants.
3. Recherchez ou déroulez le catalogue pour sélectionner Jint - Image interactive, dans la catégorie « Texte, média et contenu ».
4. Le composant est ajouté à l'emplacement souhaité, avec ses valeurs par défaut.

Une Image interactive fraîchement insérée affiche une image fournie par défaut, en entier, dans un composant de hauteur Moyenne (250 px) sur fond blanc. Elle ne porte encore aucune zone et n'affiche pas de titre.

3. Choisir l'ajustement de l'image

L'ajustement décide de la façon dont l'image occupe le composant. Il se règle dans l'onglet Design, rubrique Mise en page, avec le réglage Ajustement de l'image.

En Remplir le composant WebPart, le bouton Régler le point focal apparaît : il ouvre une fenêtre où vous faites glisser la cible sur la partie de l'image à garder visible, quel que soit le cadrage.

⚠ En Remplir le composant WebPart, les zones qui dépassent du cadre sont rognées avec l'image : vos visiteurs ne les voient plus, ou n'en voient qu'une partie.

⚠ Le bouton Régler le point focal est désactivé tant que le composant affiche l'image par défaut, ou si l'image est introuvable. Choisissez d'abord votre image.

💡 L'édition des zones interactives montre toujours l'image entière, quel que soit l'ajustement choisi. Vous pouvez donc y poser des zones sur une partie de l'image que le cadre rogne sur la page.

4. Paramétrer le composant

Le panneau de configuration se compose de trois onglets : Design, Contenu et Visibilité. Chaque réglage s'applique immédiatement sur la page.

4.1 Onglet Design

L'onglet Design regroupe, dans cet ordre, les rubriques Mise en page (voir la partie 3), Hauteur du composant WebPart, Arrière-plan et Apparence.

Hauteur du composant WebPart

• Hauteur (px) apparaît quand vous choisissez Personnalisée.
• La rubrique n'apparaît pas quand l'ajustement vaut Adapter le composant WebPart à l'image : c'est alors l'image qui donne sa hauteur au composant.

Arrière-plan

• Couleur : le fond prend la couleur choisie. Les textes sans couleur propre posés sur ce fond passent automatiquement en noir ou en blanc, selon ce qui contraste le mieux.
• Image : le fond affiche l'image choisie, recadrée selon son Point focal. Le Texte de remplacement apparaît quand l'image n'est pas marquée comme décorative.

💡 Le fond se voit surtout en Image entière, autour de l'image quand ses proportions diffèrent de celles du composant.

⚠ Ne confondez pas l'image d'arrière-plan avec l'image du composant, celle qui porte les zones : elle se choisit dans l'onglet Contenu, rubrique Image.

Apparence

La rubrique Apparence règle le contour, l'ombre et l'arrondi du composant.

Par défaut, le composant suit le thème Jint de votre site : la rubrique affiche « Les valeurs d'apparence viennent du thème. Il se règle dans Jint Portal. » et ses réglages sont désactivés. Cliquez sur Personnaliser pour les modifier. Pour revenir au thème, cliquez sur Réinitialiser depuis le thème.

💡 Les coins de l'image s'arrondissent avec le composant, d'un rayon égal à l'arrondi du composant moins sa marge intérieure. Tant que l'arrondi ne dépasse pas cette marge, l'image garde des angles droits.

4.2 Onglet Contenu

L'onglet Contenu regroupe, dans cet ordre, les rubriques Titre, Accessibilité, Image et Zones interactives.

Titre

Activez Afficher le titre pour afficher un titre au-dessus de l'image. Le titre se saisit et se met en forme directement sur la page (voir la partie 6). Tant que vous n'avez rien saisi, vous voyez le texte indicatif « Image interactive » ; vos visiteurs, eux, ne voient pas de titre.

Accessibilité

La rubrique Accessibilité apparaît quand Afficher le titre est activé. Elle mesure automatiquement le contraste du titre avec son fond, sans que vous ayez à cliquer dessus. Elle affiche le Ratio et une Lisibilité globale : Excellent, Bon ou Insuffisant. Si le contraste est insuffisant, cliquez sur Corriger : chaque couleur insuffisante du titre est remplacée par la couleur de la palette la plus proche qui offre un contraste suffisant.

• Tant que le titre est vide, la rubrique affiche « Saisissez un titre sur la page pour vérifier son contraste. »
• Sur un arrière-plan Image, la rubrique indique « Le contraste ne peut pas se mesurer sur ce texte. »

Image

• Choisir une image ouvre le sélecteur de fichiers de SharePoint. Le panneau rappelle le format conseillé : « Recommandé : JPG, PNG ou WebP, 1920 × 1080 px minimum, moins de 1 Mo. »
• Texte de remplacement apparaît quand l'image n'est pas marquée comme décorative : « Le texte de remplacement est destiné aux personnes non voyantes ou malvoyantes. Décrivez brièvement en quoi cette image est pertinente pour la page. » Laissé vide, l'image est traitée comme décorative par les lecteurs d'écran.
• Retirer l'image remet l'image par défaut, sans confirmation.
• Le point focal de l'image ne se règle pas ici, mais dans la rubrique Mise en page, en Remplir le composant WebPart (voir la partie 3).

⚠ Contrairement à l'image d'arrière-plan, l'image du composant n'est pas marquée comme décorative par défaut : pensez à renseigner son Texte de remplacement.

⚠ Quand vous changez d'image, chaque zone garde sa place sur la nouvelle image. Si le nouveau visuel diffère, vérifiez la position de vos zones dans l'édition des zones interactives.

⚠ Si l'image est supprimée ou déplacée, le composant affiche un fond blanc à la place, sans aucune zone. Le panneau et l'édition des zones interactives affichent « Image introuvable : elle a peut-être été supprimée ou déplacée. Choisissez-en une autre. » et les outils de l'édition sont désactivés. Un visiteur qui n'a pas le droit de lire l'image voit aussi un fond blanc.

Zones interactives

La rubrique Zones interactives indique combien de zones porte l'image : « Aucune zone pour le moment. », « 1 zone définie. » ou le nombre de zones définies.

Cliquez sur Configurez votre image interactive pour ouvrir l'édition des zones interactives, en plein écran (voir la partie 5).

4.3 Onglet Visibilité

Audience

Activez Audience personnalisée pour réserver le composant à des personnes ou aux membres de groupes Microsoft 365. Seuls les visiteurs choisis, ou membres d'au moins un groupe choisi, le voient. Pour les autres, il ne prend aucune place sur la page.

Affichage

Activez Planifier la visibilité pour limiter l'affichage dans le temps, avec un Début de l'affichage, une Fin de l'affichage, ou les deux. Chaque date apparaît quand vous activez son interrupteur : le début est proposé à l'instant présent, la fin dans 7 jours.

⚠ Si vous activez Audience personnalisée sans choisir personne, plus personne ne voit le composant. La rubrique vous le signale : « Personne ne voit ce composant WebPart : choisissez au moins une personne ou un groupe. »

⚠ Si la fin de l'affichage précède le début, le panneau affiche « La date de fin doit être postérieure à la date de début. » et la planification ne limite pas l'affichage tant que vous ne l'avez pas corrigée.

💡 En mode édition, vous voyez toujours le composant, quelle que soit son audience ou sa planification. Un badge vous le signale : « Audience », ou les dates d'affichage.

5. Poser et régler les zones interactives

5.1 L'écran d'édition

Dans l'onglet Contenu, rubrique Zones interactives, cliquez sur Configurez votre image interactive. L'édition des zones interactives s'ouvre en plein écran :

• en haut, les boutons Revenir à la page, Annuler, Rétablir, Dézoomer, Zoomer et Quitter l'édition ;
• à gauche, les outils de pose des zones ;
• au centre, l'image entière, avec ses zones ;
• à droite, la liste des zones, ou les réglages de la zone sélectionnée.

En tête de la liste, vous retrouvez les réglages de l'image : Choisir une image et Texte de remplacement.

Chaque modification s'affiche aussitôt sur la page, sans étape d'enregistrement. Pour revenir à la page, cliquez sur Revenir à la page ou sur Quitter l'édition.

• Annuler et Rétablir défont et refont vos derniers gestes sur les zones.
• Dézoomer et Zoomer passent d'un palier à l'autre : 50, 72, 100, 140 et 200 %. L'écran s'ouvre toujours à 100 %.

⚠ Annuler ne remonte que jusqu'à l'ouverture de l'écran d'édition. Une fois revenu à la page, vous ne pouvez plus annuler les gestes faits avant.

5.2 Poser une zone

Quatre outils sont proposés à gauche, un par forme : Épingle, Rectangle, Ellipse et Forme libre. À l'ouverture de l'écran, aucun outil n'est sélectionné.

1. Cliquez sur un outil pour le sélectionner. Cliquez de nouveau dessus pour le désélectionner.
2. Posez la zone sur l'image :

• Épingle, Rectangle ou Ellipse : cliquez sur l'image, à l'endroit voulu.
• Forme libre : tracez le contour de la zone sur l'image, puis relâchez.

1. La zone posée est sélectionnée et ses réglages s'affichent à droite. L'outil se désélectionne : sélectionnez-le de nouveau pour poser une autre zone.

Tant qu'il n'y a aucune zone, la liste affiche « Choisissez un outil à gauche, puis cliquez sur l'image pour poser une première zone. »

• Une zone qui dépasserait de l'image y est ramenée en entier.
• Un tracé de forme libre qui ne forme qu'un seul segment ne pose aucune zone.
• Une épingle garde toujours la même taille, quelle que soit la taille de l'image.

💡 Avec un outil sélectionné, un clic sur une zone existante pose une nouvelle zone par-dessus. Quand deux zones se chevauchent, la dernière posée s'affiche au-dessus.

5.3 Sélectionner, déplacer et redimensionner une zone

• Sélectionner : sans outil sélectionné, cliquez sur la zone, ou sur sa ligne dans la liste. Pour désélectionner, cliquez sur une partie vide de l'image.
• Déplacer : sans outil sélectionné, faites glisser la zone. Elle se sélectionne en même temps.
• Redimensionner : tirez une poignée de la zone sélectionnée. Seuls les rectangles et les ellipses se redimensionnent.

Une zone s'arrête au bord de l'image : elle ne peut pas en sortir.

La liste des zones

La liste s'intitule Zones, suivi du nombre de zones. Elle affiche une ligne par zone, dans l'ordre où vous les avez posées, avec l'icône de sa forme et son nom. Le nom est le titre de l'infobulle de la zone ; sans titre, c'est la forme suivie de son rang, par exemple « Rectangle 2 ».

Des badges résument ce que fait chaque zone :

5.4 Régler une zone

Quand une zone est sélectionnée, ses réglages remplacent la liste. En tête, le nom de la zone et deux boutons : Revenir à la liste des zones et Supprimer la zone.

⚠ Supprimer la zone supprime la zone sans confirmation. En cas d'erreur, cliquez sur Annuler.

Apparence

💡 Une zone invisible n'affiche rien pour vos visiteurs, mais garde son lien et son infobulle. Vous la voyez en pointillés en mode édition. C'est utile pour rendre cliquable une partie de l'image sans la recouvrir.

Action

• Lien accepte une adresse complète, un chemin qui commence par /, une ancre qui commence par #, une adresse e-mail ou un numéro qui commence par tel:. L'adresse s'applique quand vous quittez le champ. Un nom de domaine saisi sans https:// est complété automatiquement, de même qu'une adresse e-mail par mailto:.
• Si l'adresse n'est pas acceptée, le champ vous l'indique : « Ce type de lien n'est pas autorisé. », « L'adresse ne doit pas contenir d'espace. » ou « Cette adresse ne semble pas valide. »
• Ouverture dans : Un nouvel onglet ouvre le lien dans un nouvel onglet du navigateur ; Le même onglet l'ouvre à la place de la page ; Une modale et Un panneau l'affichent par-dessus la page, sans la quitter (voir la partie 5.6).
• Largeur du panneau apparaît quand vous choisissez Un panneau.

⚠ Un lien vers une adresse e-mail ou un numéro de téléphone s'ouvre toujours comme dans Un nouvel onglet, et un lien vers une ancre toujours comme dans Le même onglet, quel que soit le choix d'Ouverture dans.

Infobulle

Activée, l'infobulle de la zone s'affiche sur l'image, prête pour la saisie, et les réglages rappellent : « Le texte s'écrit directement dans l'infobulle, sur l'image, mise en forme comprise. »

5.5 Écrire l'infobulle

Quand une zone dont l'infobulle est activée est sélectionnée, sa bulle s'affiche, prête pour la saisie. Elle comporte deux textes :

• le titre, sur une ligne, en 16 px et gras par défaut, avec le texte indicatif « Titre de l'infobulle » ;
• le texte, sur plusieurs lignes, en 12 px par défaut, avec le texte indicatif « Texte de l'infobulle ».

Cliquez dans l'un ou l'autre pour le saisir et le mettre en forme avec la barre d'outils de texte (voir la partie 6).

Le titre de l'infobulle sert aussi de nom à la zone dans la liste, et d'en-tête à l'aperçu du lien quand celui-ci s'ouvre dans une modale ou un panneau.

5.6 Ce que voient vos visiteurs

L'infobulle

Quand un visiteur survole une zone dont l'infobulle est activée, l'infobulle s'affiche et pointe vers sa zone. Elle se place au-dessus de la zone ; si la place manque, en dessous ; si elle manque des deux côtés, du côté qui en a le plus. Elle se décale pour rester dans l'image et, si elle est plus haute que la place disponible, déborde de l'image sur la page.

⚠ Une infobulle dont le titre et le texte sont vides ne s'affiche pas. Un titre ou un texte laissé vide ne s'affiche pas non plus.

Une forme libre ne réagit au survol et au clic que sur sa forme, jamais sur le rectangle qui l'entoure.

Le lien

Quand un visiteur clique sur une zone qui a un lien valide, le lien s'ouvre selon le choix d'Ouverture dans.

Avec Une modale ou Un panneau, la page du lien s'affiche dans un aperçu, sans quitter la page :

• en modale, au centre de l'écran, sur un voile sombre ;
• en panneau, collé au bord droit de la page, de la largeur choisie ;
• sur mobile, l'aperçu occupe toute la largeur de l'écran, en modale comme en panneau.

En tête de l'aperçu s'affiche le titre de l'infobulle de la zone, sinon l'adresse du lien. Le bouton Ouvrir dans un onglet ouvre la page dans un nouvel onglet. Pour fermer l'aperçu, le visiteur clique sur Fermer ou en dehors de l'aperçu.

⚠ Certains sites refusent de s'afficher à l'intérieur d'une autre page. Dans l'aperçu, le visiteur voit alors la page d'erreur du navigateur. Pour ces liens, choisissez Un nouvel onglet.

Sur un écran tactile

⚠ Sur un écran tactile, toucher une zone qui a un lien ouvre le lien, sans afficher l'infobulle. L'infobulle ne s'affiche au toucher que sur une zone sans lien. Toucher ailleurs la referme.

6. Saisir et mettre en forme les textes sur la page

Le titre du composant et les textes des infobulles se saisissent directement sur la page, pas dans le panneau de configuration.

Le titre

Une fois Afficher le titre activé, cliquez sur le titre : il devient modifiable et une barre d'outils s'affiche au-dessus de lui. Par défaut, le titre est en H4, noir, 20 px et gras.

💡 Tant que le composant suit le thème Jint, la barre d'outils du titre affiche à la place le bandeau du thème. Cliquez sur Personnaliser pour mettre le titre en forme.

Les infobulles

En mode édition de la page, cliquez sur une zone dont l'infobulle est activée : l'infobulle s'ouvre, prête pour la saisie. Cliquez en dehors de l'infobulle et de sa barre d'outils pour la refermer. Vous pouvez aussi écrire l'infobulle dans l'édition des zones interactives (voir la partie 5.5).

La barre d'outils de texte

La barre d'outils règle le Style de texte (H1 à H4 ou Corps), la Police, la Taille de police, la Couleur du texte, le gras, l'italique, le souligné et l'alignement. Le bouton Réinitialiser la mise en forme rétablit le style d'origine.

• Un texte collé perd sa mise en forme d'origine.
• Les textes s'affichent tels que vous les avez saisis, sans traduction automatique.

7. Bonnes pratiques

Choisir la bonne image, et la garder

Choisissez une image lisible même sans zones, au format conseillé, et stockée à un endroit que vos visiteurs ont le droit de lire. Une fois vos zones posées, évitez de changer d'image : les zones restent à leur place, pas sur le contenu du nouveau visuel.

Ne rien rogner sur une carte ou un plan

Pour une carte ou un plan, préférez Image entière ou Adapter le composant WebPart à l'image : aucune zone n'est rognée, à toutes les largeurs d'écran.

Donner un titre à chaque infobulle

Un titre d'infobulle nomme la zone dans la liste, ce qui la rend plus lisible, et sert d'en-tête à l'aperçu du lien.

Vérifier les badges avant de quitter l'édition

Avant de revenir à la page, parcourez la liste des zones : une zone marquée à renseigner ne fait rien pour vos visiteurs. Donnez-lui un lien ou une infobulle, ou supprimez-la.

Penser aux visiteurs sur mobile

Sur un écran tactile, l'infobulle d'une zone qui a un lien ne s'affiche pas. Si l'information de l'infobulle compte, ne la réservez pas à une zone qui porte un lien.

Décrire l'image

Renseignez le Texte de remplacement de l'image, pour les personnes qui utilisent un lecteur d'écran.

8. Ce qui change par rapport à la version précédente

Si vous utilisiez la version précédente du composant (voir l'article Composant Image interactive) :

• Le composant s'appelle Jint - Image interactive dans le catalogue, et se trouve dans la catégorie « Texte, média et contenu ».
• Le panneau s'organise en trois onglets, Design, Contenu et Visibilité.
• Les tailles du composant et l'option d'adaptation à l'image deviennent deux réglages : Ajustement de l'image, avec trois choix dont le nouveau Remplir le composant WebPart et son point focal, et Hauteur du composant WebPart (Petite, Moyenne ou Personnalisée).
• Choisir une image ouvre le sélecteur de fichiers de SharePoint.
• Nouveaux réglages : le Texte de remplacement de l'image, la rubrique Accessibilité du titre, l'Arrière-plan, l'Apparence liée au thème Jint et l'onglet Visibilité.
• L'édition des zones s'ouvre avec Configurez votre image interactive et se ferme avec Quitter l'édition ou Revenir à la page. Vos modifications s'appliquent toujours sans enregistrement.
• Les formes deviennent Épingle, Rectangle et Ellipse, rejointes par la nouvelle Forme libre.
• Plus besoin d'outil pour déplacer une zone : faites-la glisser directement. Les rectangles et les ellipses se redimensionnent par leurs poignées.
• Nouveau : Annuler et Rétablir, le zoom, la liste des zones avec ses badges et la Couleur de la zone.
• Le lien s'ouvre au choix dans Un nouvel onglet, Le même onglet, Une modale ou Un panneau : les deux derniers affichent la page du lien sans quitter la page.
• Le titre et le texte de l'infobulle se saisissent et se mettent en forme directement dans la bulle, sur l'image, avec la barre d'outils de texte.
• Comme avant, une zone peut être rendue invisible.