🎓 Outil pédagogique libre pour transformer une capture d'écran en ressource interactive : hotspots cliquables, popups Markdown, annotations visuelles. Aucune installation, 100 % navigateur.
Là où un diaporama classique affiche, HotspotMD interagit : chaque image devient un écran enrichi — zones cliquables qui ouvrent des popups Markdown, flèches et étiquettes annotées, navigation entre écrans déclenchée par un clic sur une annotation. Le tout s'intègre en une ligne dans Moodle, ELEA, CodiMD ou DigiPage.
Créez un document Markdown avec le format HotspotMD (écrans, hotspots, annotations). Rendez-le public (ou partageable) pour que HotspotMD puisse le charger.
Collez l'URL de votre document dans la barre en haut de HotspotMD et cliquez Charger. Vous pouvez aussi ajouter l'URL directement dans le lien :https://hotspotmd.forge.apps.education.fr/#URL
Le viewer se met à jour à chaque chargement. Partagez le lien direct, ou utilisez le bouton pour copier le code iframe à coller dans Moodle, ELEA, CodiMD ou DigiPage.
Basculez le switch Édition en haut à droite pour débloquer la création de contenu.
Dans le panneau gauche, cliquez sur à droite de la section Écrans, puis renseignez l'URL de votre capture d'écran. Créez autant d'écrans que nécessaire pour documenter un flux complet.
En mode Édition, cliquez sur l'image pour créer un hotspot. Éditez son titre, son icône et son contenu Markdown dans le panneau droit. Glissez-déposez pour le repositionner.
Activez le mode Annotations pour ajouter flèches, zones, étiquettes, textes et icônes. Chaque annotation peut pointer vers un autre écran (Navigation → écran cible) — transformant votre diaporama en parcours interactif guidé.
Exportez en PNG, HTML autonome, Markdown (à coller dans CodiMD) ou JSON. Copiez le code iframe pour intégrer directement dans Moodle, ELEA, CodiMD ou DigiPage.
Découvrez toutes les fonctionnalités avec le tutoriel interactif intégré :
Les hotspots sont des points cliquables sur l'image qui affichent une popup avec du contenu Markdown.
En mode édition, cliquez sur l'image. Le hotspot est automatiquement sélectionné — vous pouvez directement saisir son titre et son contenu dans le panneau droit. Glissez-déposez pour le repositionner.
Cliquez sur un hotspot dans la liste du panneau gauche ou sur l'image. Le panneau droit affiche :
fas fa-star, ou forme sketchnote @bubble-roundpopup (par défaut) ou lien vers une URL externeSélectionnez un hotspot, puis Ctrl+C pour le copier. Changez d'écran et appuyez Ctrl+V pour le coller — le hotspot est recréé sur l'écran courant avec un décalage de 3 %. Pratique pour dupliquer un hotspot identique sur plusieurs écrans.
Section "Style popup" pour personnaliser la largeur, les couleurs, la position (top / bottom / left / right), l'animation (fade / slide / zoom) et le gradient du header.
Le sélecteur de thème en haut du panneau droit change les couleurs de tous les hotspots et popups en temps réel. Les couleurs non définies explicitement héritent automatiquement du thème.
Thèmes disponibles : dark, light, ocean, nature, sunset, bleu-nuit.
Les annotations sont des éléments graphiques dessinés sur l'image. Activez le mode Annotations dans la barre d'outils.
@bubble-round, @star-five…).
5
Cliquez sur une annotation pour la sélectionner (contour bleu). Le panneau de propriétés apparaît à droite avec tous les paramètres éditables en temps réel, dont le champ Ordre (z-index) pour contrôler quel élément s'affiche au-dessus.
Sans outil actif, cliquez-glissez une annotation pour la repositionner. Les rectangles ont des poignées de redimensionnement, les flèches des points d'extrémité déplaçables.
Maintenez Ctrl et cliquez plusieurs annotations pour les sélectionner ensemble — déplacement groupé et panneau commun. Utilisez le bouton Grouper pour lier les annotations : elles se déplacent et se sélectionnent d'un seul bloc. Le bouton Dégrouper est disponible quand un membre du groupe est sélectionné.
N'importe quelle annotation peut naviguer vers un autre écran en mode viewer. Sélectionnez-la → section Navigation dans le panneau de propriétés → choisissez l'écran cible. En Markdown : href=N (numéro de l'écran). Le curseur devient une main au survol.
Cliquez sur dans la barre d'outils pour insérer un groupe d'annotations prêt à l'emploi.
En mode Édition, cliquez sur à côté de la section Écrans pour insérer un écran complet avec annotations et hotspots prépositionnés.
En mode Édition, chaque écran de la liste affiche des boutons ↑ ↓ pour changer son ordre d'affichage. Les modèles personnels peuvent être sauvegardés via l'icône et exportés/importés en JSON.
Un clic → télécharge un PNG 2× de l'écran courant avec toutes les annotations et hotspots aplatis.
Idéal pour Moodle / ELEA / documents Word.Modale avec choix du format (PNG, JPEG, SVG), échelle (1×/2×/3×), et options inclusion hotspots/annotations.
Copie le projet complet au format Markdown dans le presse-papier. Collez dans CodiMD pour le partager.
Télécharge un fichier HTML autonome avec le viewer intégré. Partageable par simple lien.
Copie un code <iframe> pour intégrer le viewer dans un site ou une page Moodle.
Sauvegarde/charge le projet complet (écrans + hotspots + annotations) pour continuer plus tard.
Le projet se stocke en Markdown pur, compatible avec CodiMD et tout éditeur Markdown.
# Titre du projet <!-- theme=ocean --> ## Titre de l'écran 1  ### Titre du hotspot <!-- x=25 y=30 icon=fas fa-info-circle bgcolor=#4CAF50 --> Contenu Markdown de la popup... > Annotation : Flèche vers le bouton > <!-- type=arrow x1=20 y1=15 x2=45 y2=35 color=#FF0000 --> > Annotation : Étape 1 > <!-- type=label x=45 y=38 number=1 text=Cliquez ici --> > Annotation : Zone de focus > <!-- type=rect x=30 y=40 w=25 h=15 color=#FFC107 dimming=true -->
### Titre → Hotspot (popup interactive)> Annotation : Titre → Annotation (élément visuel SVG)| Type | Paramètres clés |
|---|---|
rect | x, y, w, h, color, fill, strokeWidth, borderRadius, dimming, label, labelSize, labelColor |
arrow | x1, y1, x2, y2, color, strokeWidth, dashed, headSize, startMarker, endMarker |
label | x, y, number, text, bgColor, textColor, assocColor, shape, fontSize, anchorX, anchorY |
text | x, y, text, fontSize, fontFamily, bold, italic, bgPad, textColor |
icon | x, y, icon, iconSize, iconStrokeWidth, shadow, color |
note | x, y, w, h, text, fontSize, bold, italic, bgColor, borderColor, borderRadius |
Paramètres communs à tous les types : opacity, zIndex (ordre d'affichage), groupId (groupe), rotation, href (numéro d'écran — cliquer navigue vers cet écran en mode viewer).
Les formules LaTeX sont rendues automatiquement dans les popups et les annotations via KaTeX.
| Syntaxe | Rendu |
|---|---|
$E = mc^2$ | Formule inline dans le texte |
$$\int_0^\infty e^{-x}\,dx = 1$$ | Formule en bloc, centrée |
\( \frac{a}{b} \) | Inline (syntaxe LaTeX) |
\[ \sum_{i=1}^n i = \frac{n(n+1)}{2} \] | Bloc (syntaxe LaTeX) |
⚠️ Les _ à l'intérieur d'une formule inline $f_n$ peuvent être interprétés comme de l'italique par le parser Markdown. Préférez $$f_n$$ ou échappez : $f\_n$.
Outil pédagogique libre pour créer des ressources interactives annotées à partir de visuels.
Enseignant - RRUPN - RRUPND16 - Formateur au numérique
Lycée Louise Michel — Ruffec — Académie de Poitiers
Conception, supervision et direction du projet
Assistant IA — développement supervisé
Architecture, code, design UI
Licence MIT — Logiciel libre et open source.
Vous êtes libre d'utiliser, copier, modifier et distribuer HotspotMD.
HTML/CSS/JavaScript vanilla — aucun framework, aucun build step. Dépendances : Font Awesome 6 (icônes), Marked.js (Markdown), DOMPurify (sécurité). SVG natif pour les annotations.