Redaktion - 09.12.2024

Neu in den Courselets: Image-Hotspots erstellen

Ab sofort können Sie auf einem Hintergrundbild Icons platzieren, die bei Klick weitere Informationen in Text, Bild, Audio und mehr öffnen – ohne dabei die Seite zu wechseln.

Image Hotspots eignen sich insbesondere dort, wo Lernende ein Bild selbst entdecken sollen: mit dem Klick auf ein Icon erfahren sie mehr. So lassen sich z.B. beim Sprachenlernen die jeweiligen Vokabeln zum abgebildeten Gegenstand hinterlegen –inklusive eines Audios zur Aussprache oder eines kleinen Videos.

Klick zum VergrößernGrossansicht

So geht's

Laden Sie im Standard-Block "Bild" zunächst die Hintergrundgrafik hoch. Als nächstes fügen Sie im Bild-Block das Element "Positionierung auf Grafik" hinzu. Damit platzieren Sie das benötigte Info-Icon an gewünschter Stelle. Tragen Sie die Koordinaten in der Form X,Y ein. Die Koordinaten sehen Sie, wenn Sie in der Vorschau mit dem Mauszeiger über das Bild fahren.

Jetzt noch das Element "Icon" hinzufügen. Dieses öffnet später die Lightbox mit den entsprechenden Inhalten. Hier können Sie selbst eine Bild-Datei einbinden oder eines der Standard-Icons auswählen. Wichtig: Unter "Referenz" geben Sie eine Bezeichnung für die zugehörige Lightbox ein.

Der jetzt benötigte Spezial-Block "Lightbox" umfasst die Inhalte, die sich bei Klick auf das Icon öffnen sollen. Klappen Sie die Einstellungen auf und geben unter "Referenz" den gleichen Begriff ein, wie im Icon-Element oben. Sie können hier unterschiedliche Elemente unterbringen: von Text über Downloads und Audios bis hin zu Video-Dateien.

Im Anschluss können Sie weitere Icons mit einer zugehörigen Lightbox anlegen. Die Referenz sollte sich dabei von der vorherigen unterscheiden.

Neuerungen in der Übersicht

Das Standard-Element "Icon" wurde erweitert:

im Icon-Pool stehen jetzt Standard-Icons zur Auswahl zur Verfügung
das neue Feld "Referenz" wird benötigt, um eine Verbindung zur jeweiligen Lightbox herzustellen (siehe Anleitung unten)

Neuer Spezial-Block "Lightbox":

wird benötigt, um Image-Hotspots zu erstellen. Hier werden die Elemente untergebracht, die sich nach Klick auf ein Icon als Layer öffnen (s.u.).

Leerzeilen einfügen:

Mit dem Standard-Element "Umbruch" kann jetzt optional durch die Auswahl in den Einstellungen eine Leerzeile erzeugt werden.