Bilder klickbar machen

Du kannst in Ariadne Bilder mit klickbaren Flächen versehen und diese zu Ariadne-Inhalten oder zu externen URLs verlinken – je nachdem, wohin der Nutzer gelangen soll.

Voraussetzungen

• Du bist im Bearbeitungsmodus einer Seite

Schritt 1: Bild hochladen

Bring das gewünschte Bild per Drag & Drop oder über Bild hochladen in die Seite ein.

Schritt 2: Image Map öffnen

Klicke auf das eingefügte Bild und dann auf Image Map einfügen/editieren am unteren Bildrand – das ist das kleine Puzzleteil-Symbol.

Schritt 3: Klickbare Flächen definieren

Wähle eine Form und zeichne die Bereiche auf dem Bild, die mit Links versehen werden sollen. Du kannst zwischen drei Formen wählen:

• Rechteck: Zwei Klicks für gegenüberliegende Ecken
• Kreis: Zwei Klicks für Mittelpunkt und Radius
• Polygon: Jeder Klick setzt einen Eckpunkt. Doppelklick oder Shift + Klick beendet die Form

Schritt 4: Fläche verlinken

Option A: Zu einer URL verlinken

Wenn der Benutzer auf einen externen Link klicken soll:

1. Wähle bei Links die Option URL
2. Kopiere die komplette URL (z. B. https://example.com) und füge sie in das Feld Adresse ein
3. Die URL wird erkannt und ist sofort einsatzbereit

Option B: Zu Ariadne-Inhalt verlinken

Wenn der Benutzer zu einer Ariadne-Seite oder einem Modul navigieren soll:

1. Wähle bei Links die Option Ariadne Inhalt
2. Wähle das Modul aus (z. B. Prozessübersicht, Arbeitsanweisung, Formular)
3. Suche und wähle den Inhalt – du findest veröffentlichte Seiten und Entwürfe
4. Der Link wird automatisch gespeichert und bleibt gültig, auch wenn die Seite später freigegeben wird

Mouseover-Text (optional – beide Optionen)

Gib einen Titel ein – dieser Text wird angezeigt, wenn Nutzer mit der Maus über die klickbare Fläche fahren.

Öffnungsort (optional – beide Optionen)

Wähle im Feld Anzeigen in, wie die Seite oder URL geöffnet werden soll:

• Dieses Fenster: Öffnet im selben Tab
• Neues Fenster: Öffnet in einem neuen Tab
• Oberstes Fenster: Öffnet im obersten Fenster – relevant, wenn Ariadne in einem Frame eingebunden ist

Schritt 5: Weitere Flächen hinzufügen

Wiederhole Schritt 3 und 4 für jede weitere Fläche, die verlinkt werden soll.

Schritt 6: Image Map speichern

Bestätige mit OK, um alle verlinkten Flächen zu speichern.

Ergebnis

Das Bild hat nun klickbare Flächen. Nutzer können auf die Bereiche klicken und gelangen zu Ariadne-Seiten oder externen Websites – je nachdem, wie du die Flächen verlinkt hast.

Verwandte Artikel

• Seiten verlinken
• Bild einbinden und ändern
• Prozesslandkarte einbinden