Interaktive Bilder

Interaktive Bilder sind Bilder, bei denen einzelne Bereiche eines Bildes als Auslösebereiche definiert werden. Es gibt zwei verschiedene Arten von interaktiven Bildern. So können Sie Bilder erstellen, bei denen durch Klick auf einen Auslöser ein sogenanntes Pop-Up erscheint (vgl. Bild von Schreibtisch)[1] oder solche, bei denen Sie mit der Maus über einen Bereich fahren können und ein weiteres Bild, ein sogenanntes Overlay-Bild, erscheint.[2]

Beispiel für interaktives Bild mit Content-Pop-Up

qtitle

Tintenfass

Video zu interaktiven Bildern mit Pop-Up

Kurzbeschreibung

• Ein zugrundeliegendes Bild über die Funktion 'Interkatives Bild' aus Datei einfügen.
• Legen Sie unter dem Reiter "Auslöser" Brereiche durch Mausklicks fest (rechteckig oder rund; hier erst Mitte dann Rand des Kreises).
• Unter dem Reiter "Content-Popups" Popups angelen und signifikant benennen.
• Auslöser-Bereiche und Popups im Menü unterhalb des Bildes verbinden.
• Größe und Position der Popups im Menü unterhalb des Bildes verändern.
• Unter dem Reiter "Seite" werden Popups mit Inhalten befüllt.

 
Vergessen Sie nicht, ihre Zwischenschritte zu speichern!

Nutzen Sie die Präsentationsansicht um ihre Einstellungen zu überprüfen.

Short Description

• Use the "Insert interactive image" function and upload an image file.
• Click on the image and select "edit properties". Under the tab "Triggers", create and name trigger areas on the image (rectangle, circle; first click for the center, second click for outline).
• Create popups under the tab "Content Popups" and name them (preferrably matching the trigger names).
• Now connect triggers with content via the "Select Content Popup Title" in the dropdown menu underneath the image.
• Under the tab "Actions", click on "Edit Popup Position" to drag the content box to a desired position.
• The settings "Width, Height in pixels" must match the size of the content you wish to add.
• Under "Edit Page" and "Popup Content", elements can be implemented like any other page content.

 
Remember to save your settings regularly!

Use the presentation mode to check setting outcomes.

Beispiel für interaktives Bild mit Overlay

Video zu interaktivem Bild mit Overlay

Kurzbeschreibung

• Klicken Sie auf (+) und "Interaktives Bild".
• Laden Sie eine zugrundeliegende Bilddatei hoch.
• Laden Sie ein Overlay Bild hoch, das gezeigt werden soll, wenn die Maus über das Bild fährt. 
• Unter dem Reiter "Auslöser" können Sie einen Bereich festlegen:
  • Im Menü unter dem Bild eine Form auswählen.
  • ILIAS gibt Anweisungen zum Erstellen der jeweiligen Form.
• Wählen Sie in der Spalte "Bild für Overlay" das Bild aus, welches zuvor hochgeladen wurde.
• Sie können die Position des Bildes anpassen unter "Aktionen" und Position des Overlays bearbeiten".

Short Description

• Click (+) and select "Insert Interactive Image".
• Upload an image file as base image.
• Upload the overlay image file which is to appear when the cursor moves over the base image.
• Under the tab "Trigger", select a trigger area
  • with a certain shape
  • ILIAS provides instructions how to create the selected shape.
• Now select the uploaded image from the drop down menu "Overlay Image".
• Under the tab "Actions" and "Edit Popup Position" the image position can be adjusted.