Hotspot carousel

Ce qui est inclus

Un carrousel de photographies où chaque image porte des points cliquables : on ouvre un point, une fiche apparaît à côté avec un titre, un prix, une description et un lien. Sous l’image, un rail de miniatures sert de sélecteur de vue. Deux fichiers, une feuille de style et un script — aucune dépendance, aucune étape de build, aucune requête externe.

Un point chaud est un <details> du navigateur : il s’ouvre, se ferme, se pilote au clavier et expose son état sans que rien n’ait été réécrit. Le script ne fait que projeter chaque point sur la photo, à partir de ses coordonnées.

Fonctionnalités

• Points positionnés en pourcentage — data-x et data-y sur chaque point, et il se place au même endroit de l’image quelle que soit la taille du cadre.
• La fiche reste dans le cadre — elle s’ouvre à droite du point, passe à gauche si la place manque, et glisse verticalement pour ne jamais déborder.
• Clavier complet — un seul arrêt de tabulation pour les miniatures, les flèches pour changer de vue, Début et Fin pour aller aux extrémités, Entrée pour ouvrir un point, Échap pour le refermer en rendant le focus.
• Marche sans JavaScript — le cadre devient un défilement natif, les miniatures redeviennent des ancres, et les points quittent la photo pour s’aligner au pied de la vue, toujours ouvrables.
• Une variable pour l’échelle — toutes les mesures dérivent de la taille du texte : le point, le halo, les flèches, le rail et la fiche suivent ensemble.
• Défilement automatique en option — arrêté par défaut ; quand il est demandé, il se met en pause au survol, au focus, sur une fiche ouverte, sur un onglet caché, et apporte son bouton lecture/pause.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

<link rel="stylesheet" href="hotspot-carousel.css">
<script src="hotspot-carousel.js" defer></script>

<section class="hotspot-carousel" aria-label="Nos pièces">
  <div class="hotspot-carousel__viewport">
    <article class="hotspot-carousel__slide" id="vue-1">
      <img class="hotspot-carousel__image" src="salon.webp" alt="Salon">
      <div class="hotspot-carousel__hotspots">
        <details class="hotspot-carousel__hotspot" data-x="78" data-y="28">
          <summary class="hotspot-carousel__pin">…</summary>
          <div class="hotspot-carousel__panel">…</div>
        </details>
      </div>
    </article>
  </div>
</section>

Le composant s’installe au chargement : il repère toute .hotspot-carousel de la page, y compris celles insérées après coup. Le balisage complet — compteur, flèches, rail de miniatures — est dans le README et dans la démo.

Ce qu’il faut savoir

• Les photos livrées sont celles de la maquette. Elles viennent de la démonstration publique qui a servi de référence, et leur licence n’est pas établie. Elles sont là pour que la reproduction soit vérifiable au pixel : remplacez-les par les vôtres avant toute mise en ligne. Le README le redit, avec la liste des fichiers.
• Une position est une donnée, pas une classe. C’est pourquoi le script est nécessaire pour poser les points sur l’image : la politique de sécurité stricte du site interdit l’attribut style qui porterait les coordonnées. Sans script, les points ne disparaissent pas — ils se rangent au pied de la vue.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML : le texte d’une fiche venant d’une base de données ne peut pas injecter de balise.
• Le dessin vient d’ailleurs. Les proportions et le mouvement reprennent ceux d’un composant Framer commercial, relevés au pixel et à la milliseconde sur son site en ligne. Le code, lui, est original : rien n’a été repris de son implémentation.