Freigestellte Dekoratoren

Nutzung freigestellter Grafiken für die Markierung und Interaktion mit einem Hotspot

Maximilian Hoppe avatar
Verfasst von Maximilian Hoppe
Vor über einer Woche aktualisiert

Wie der Name es bereits andeutet, handelt es sich um Grafiken, die nur den gewünschten Effekt visualisieren und nicht vorab auf der Hintergrundgrafik positioniert werden müssen. Dies verringert auch das Risiko von grafischen Artefakten, die bei der Verwendung von Dekoratoren vom Typ "Ausgestanzt" aufgrund von Rundungsfehlern bei der Skalierung auftreten können.

Als einfaches und vielleicht auch bekanntestes Beispiel kann hier ein einfacher Punkt dienen, der den Hotspot auf der Leinwand markiert. Diesen kann man dann entsprechend des gewünschten Effektes in verschiedenen Farben oder Transparenzen vorliegen haben, um die möglichen Zustände

  • Normal

  • Hover

  • Geöffnet

  • (bereits) besucht

  • Gesperrt

zu visualisieren.

Erstellung des Hotspots

Im Idealfall beginnen Sie mit mit der für Ihren Zweck aufbereiteten Grafik für Ihre Leinwand ohne vorbereitete Markierungen für die Hotspots. Als Beispiel nehmen wir hier eine Deutschlandkarte (Bildquelle: Wikipedia), auf der wir einen Klickpunkt für Nordrhein-Westfalen einfügen.

Wie für jeden Hotspot markieren Sie zunächst möglichst gut den aktiven Bereich und legen den gewünschten Inhalt fest:

Wir werden in diesem Beispiel als Inhalt eine vergrösserte Karte von Nordrhein-Westfalen verwenden (Bildquelle: Wikipedia).

Festlegen des Dekorators

Nun wählen Sie den Normal-Dekorator, um dem Endnutzer einen Anhaltspunkt für den möglichen Hotspot zu geben:

Im sich öffnenden Dialog wählen Sie bitte als Typ "Freigestellter Dekorator" aus und wählen dann die für Sie passende Grafik, die Sie entweder neu hochladen oder aber, falls in der Vergangenheit bereits benutzt, aus der Galerie auswählen können. Wie in diesem Beispiel gezeigt, können Sie auch PNG-Grafiken mit Transparenzen verwenden:

Nun kommt die Positionierung des Dekorators, den wir im Beispiel grob bei Düsseldorf ausrichten. Beachten Sie, dass Sie an dieser Stelle keine Visualisierung durch die gewählte Dekoratorgrafik erhalten sondern lediglich einen Selektionsrahmen:

Die Zielgrösse des Dekorators können Sie entweder mit der Maus direkt vornehmen oder aber einen der vorgegebenen Presets verwenden. Besonders die absoluten Größen oder die Direkteingabe ermöglicht es Ihnen, die Hotspots immer in der selben Größe einzufügen:

Die Ausrichtung erfolgt analog mit der Maus oder über die angebotenen Presets.

Falls Sie den aktiven Bereich des Hotspot zuvor nur grob an die richtige Position gesetzt haben und nun aber möchten, dass tatsächlich nur der Bereich des Dekorators als Hotspot dienen soll, dann können Sie die folgende Option aktivieren:

Anwenden der Konfiguration auf weitere Dekoratoren

Wenn Sie die Positionierung des Dekorators (und womöglich auch die Grafik) für die anderen verfügbaren Dekoratoren dieses Hotspot übernehmen möchten, dann aktivieren Sie bitte die gewünschten Effekte:

Die Einstellungen der gewählten Effekte werden beim Speichern dieses Formulars überschrieben. Sie können dann in weiteren Bearbeitungsschritten beispielsweise die Grafik für die anderen Effekte austauschen.

Vorschau

Nach dem Speichern des Dekorators erhalten Sie im Bereich der Effekte des Hotspots eine Visualisierung des Dekorators im gewählten Bereich des Hotspots:

Wenn Sie in weiteren Schritten die anderen Dekoratoren angepasst haben, könnte dies beispielhaft so aussehen:

Online-Demo

Das fertige Beispiel können Sie auf der folgenden Microsite ausprobieren:

Dies könnte Sie auch interessieren:

Hat dies Ihre Frage beantwortet?