Skip to main content
Skip table of contents

H5P-Inhaltstyp: Image Hotspots

Übersicht

Image Hotspots ist ein vielfältig nutzbarer Inhaltstyp mit dem Fokus auf Präsentation und selbst erkundendem Lernen. Es erlaubt, ein Bild mit klickbaren Bereichen zu versehen, zu denen sich Lernende Informationen anzeigen lassen können. Durch die Möglichkeit der Integration von Bild und Video können Bilder 'lebendig' und für Lernende anschaulich gemacht werden.

Die Möglichkeiten, weitere Informationen zu integrieren, sind sehr vielfältig, da sich zu einem Hotspot sämtliche H5P-Inhaltstypen einfügen lassen.

Anwendungsbeispiele:

  • Präsentationen, bei denen Teilnehmende auswählen können, zu welchem Bereich sie Informationen suchen

  • Infografiken / interaktive Poster

  • digitale Lernlandkarten, vgl. Digitale Lernlandkarten in ILIAS umsetzen

Beispiel: Informationen zu Beeren
(aufs Bild klicken, um das Objekt “live” auszuprobieren)

image-hotspots.jpg

Das “Image Hotspots”-Inhaltsobjekt konfigurieren

Die Konfiguration der H5P-Inhaltsobjekte ist recht intuitiv umgesetzt, und in den Eingabefenstern sind die Funktionen der verschiedenen Einstellungen gut erläutert. Zudem sind die Einstellungen z.T. sehr zahlreich, daher werden hier nicht alle im Detail beschrieben.

Detailliertere Anleitung (englisch): Image Hotspots auf http://H5P.org

Ausgangspunkt: Objekt erzeugen

Die Konfiguration des Inhalts beginnt, nachdem es gemäss der Anleitung Erstellen von H5P-Lernobjekten in ILIAS kreiert wurde. D.h.

  • Du hast im Seiteneditor H5P einfügen gewählt und im drop-down-Menü Image Hotspots gewählt, und befindest dich nun auf der Konfigurationsseite für dieses Inhaltsobjekt.

ODER

  • Du hast mit der Funktion Neues Objekt hinzufügen ein ILIAS-H5P-Objekt erzeugt und mit Titel und Beschreibung versehen.

  • Über den Reiter Inhalt bearbeiten und die Schaltfläche Inhalt hinzufügen hast du Image Hotspots gewählt.

Nun befindest du dich auf der Einstellungsseite des Objektes.

Grundeinstellungen und Hintergrundbild
  1. Hier auf der Einstellungsseite kannst du der Aufgabe einen passenden Titel geben.

  2. Dann kannst Du das zu verwendende Bild (“Hintergrundbild”) von deinem Computer hochladen, und es allenfalls mit einem Alternativtext versehen.

  3. Des weiteren ist es möglich, das Symbol zu ändern oder ein eigenes hochzuladen, das auf dem Bild die “heissen Stellen” markieren soll.

    h5p image hotspots 1.png
Definition der Hot Spots und ihrer Inhalte

Weiter unten werden die Einstellungen eines ersten, noch undefinierten Hotspots angezeigt.

Definiere den Ort des ersten Hotspots durch Klicken auf die gewünschte Position im Bild.

Darunter wird alles definiert, was nach dem Klick auf den Hotspot an Informationen erscheinen soll. Als erstes definiert man den Titel des Informationsfensters.

Darunter kann man nun beliebige H5P-Inhaltstypen hinzufügen. Oft wird es nur ein Text sein, in den man auch Links integrieren kann. Aber prinzipiell ist es möglich, alle zur Verfügung stehenden Objekte wie Videos, Puzzles, Tests etc. zu integrieren, oder sogar mehrere Items über den Button item hinzufügen hintereinanderzuschalten.

h5p image hotspots 2.png

Weitere Hotspots kannst du danach jeweils mit dem Button HOTSPOT HINZUFÜGEN erzeugen und konfigurieren.

Am Schluss die Eingaben mit Speichern sichern.

Quellennachweis: Für diese Anleitung wurden Public-Domain-Inhalte von Nele Hirsch/eBildungslabor übernommen. Siehe Interaktive Bildungsmaterialien mit H5P.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.