Image interactive (hotspots)
L’image interactive permet d’afficher de nombreuses informations de manière visuelle et engageante. En cliquant sur les hotspots, les utilisateurs accèdent à du contenu supplémentaire : texte, images, vidéos, liens…
Cas d’usage
Les images interactives avec hotspots sont particulièrement utiles pour :
- Magazines numériques : annoter des photos, ajouter des informations contextuelles sur des produits
- E-learning : créer des schémas interactifs, annoter des diagrammes techniques
- Présentations : enrichir des visuels avec des détails accessibles à la demande
- Catalogues produits : présenter des caractéristiques détaillées sur une image
- Plans interactifs : cartographier des lieux avec des informations sur chaque zone
Pré-requis
Avant de commencer, assurez-vous d’avoir :
- Une image de fond de haute qualité
- Le contenu à afficher dans chaque popover (texte, images, etc.)
- Une compréhension de base du composant Multi-état
Étape 1 : Ajouter l’image de fond
- Importez votre image dans l’écran
- Utilisez les options Étirement et Alignement pour la rendre plein écran
Étape 2 : Créer les boutons hotspots
- Importez une image existante, ou
- Créez votre propre bouton à l’aide de formes vectorielles (ex : icône PLUS avec un cercle et des rectangles)
Utilisez des noms explicites pour faciliter la gestion des interactions.
Étape 3 : Concevoir les popovers
Choisir le format :
- Popover : contenu court affiché au-dessus de l’image (recommandé)
- Pop-up plein écran : pour du contenu plus long
Étape 4 : Gérer l’affichage avec Multi-état
Pour chaque popover, créez un composant Multi-état avec deux états :
- État caché : opacité à zéro
- État affiché : opacité normale
Méthode rapide (recommandée) :
- Sélectionnez le popover
- Menu 1 Mise en page→2 Convertir en Multi-état
- Dans le premier état, mettez l’Opacité à zéro
- Créez un État lié avec l’opacité normale
Créez un composant Multi-état par popover pour une gestion indépendante.
Étape 5 : Ajouter les interactions
- Sélectionnez le bouton hotspot
- Ajoutez une action : 1 Simple tap / Clic→2 Interagir avec un composant
- Sélectionnez le Multi-état correspondant
- Choisissez État suivant
- Activez le mode Boucle
Répétez pour chaque hotspot.
Ajoutez un bouton de fermeture visible dans chaque popover pour une meilleure UX.
Voir aussi
- Composant Multi-état - Documentation complète
- Composant Pop-up - Alternative pour du contenu long
- Zone Interactive - Zones cliquables personnalisées
- Actions interactives - Guide des interactions