Das interaktive Element ermöglicht es, Bilder mit interaktiven Punkten mit Zusatzinformationen zu beschriften. Die Darstellung ist auch für kleine Bildschirme und Touch-Gesten optimiert und basier auf @cloudimage/hotspot

Das Modul einbinden

Um die interaktiven Elemente nutzen zu können, muss die Einbindung über den Meta-Tag features erfolgen:

----
Features: cloudimage-hotspot
----

Das Modul verwenden

Am einfachsten nutzt man den visuellen Editor auf der Seite der Entwickler um die Konfiguration/Beschriftung vorzunehmen und die nötige JSON zu erhalten.

Beispiel [1]

<div
  data-ci-hotspot-src="beispiel.jpeg"
  data-ci-hotspot-items='[
  {
    "id": "armchair",
    "x": "68.58%",
    "y": "58.88%",
    "label": "Berge",
    "data": {
      "image": "test.png",
      "title": "Berge",
      "description": "Und hier eine Erklärung zu den Bergen."
    }
  },
  {
    "id": "floor-lamp",
    "x": "57.42%",
    "y": "18.29%",
    "label": "Wolken",
    "data": {
      "title": "Wolken",
      "description": "Hier könnte ein längerer Text stehen."
    }
  }
]'
></div>

Beispiel mit eigenem Style [2]

In der Datei assets/thirdparty/cloudimage-hotspot/css/hotspot-custom.css kann auch ein eigener Style hinterlegt werden:

.ci-custom-style-kilandkarte .ci-hotspot-container {
    --ci-hotspot-popover-bg: rgb(255, 243, 211) !important;
    --ci-hotspot-popover-max-width: 500px !important;
}

Das div-Element benötigt dann die dort definierte Klasse:

<div
  class="ci-custom-style-kilandkarte"
  ...
></div>