Flyout-Zoomansicht flyout-zoom-view

Die Hauptansicht besteht aus dem statischen Bild und dem gezoomten Bild, das in der Flyout-Ansicht angezeigt wird. Sie besteht auch aus dem Navigationsbereich für die Hervorhebung, der über dem statischen Bild angezeigt wird, und der Spitzenmeldung, die über dem statischen Bild angezeigt wird.

Wenn die Abmessungen des angezeigten Bildes nicht mit den Abmessungen der Ansicht „Flyout-Zoom“ übereinstimmen, wird der Bildinhalt im rechteckigen Anzeigebereich der Ansicht „Flyout-Zoom“ zentriert.

CSS-Eigenschaften der Hauptansicht

Das Erscheinungsbild der Hauptansicht wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7flyoutviewer .s7flyoutzoomview

Beispiel - um die Hauptansicht transparent zu gestalten:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

CSS-Eigenschaften der Flyout-Ansicht

Das Erscheinungsbild der Flyout-Ansicht wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Beispiel : So richten Sie eine Flyout-Ansicht auf 600 x 400 Pixel ein und erscheinen mit 100 Pixel Versatz rechts neben der im vorherigen Beispiel gezeigten Hauptansicht von 512 x 288:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

CSS-Eigenschaften der Hervorhebung in der Hauptansicht

Die Darstellung der Hervorhebung in der Hauptansicht wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

Es ist möglich, Hintergrund, Rahmen, Transparenz und ähnliche Attribute mithilfe von CSS zu steuern. Die Größe und Position des Hervorhebungs-DOM-Elements wird jedoch von der Viewer-Logik verwaltet. Das Überschreiben über CSS wird nicht unterstützt.

Beispiel: So richten Sie eine grüne Hervorhebung mit 40 % Transparenz und einem roten Rand mit einem Pixel ein:

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

CSS-Eigenschaften des Cursors

Wenn highlightmode Parameter auf cursor gesetzt ist, werden Hervorhebungsbereiche in der Hauptansicht durch Cursor-Grafiken mit fester Größe ersetzt, die mit dem CSS-Klassenselektor gesteuert werden:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

Es ist möglich, das Hintergrundbild und die Hintergrundgröße mit CSS zu steuern.

Zu den geltenden CSS-Eigenschaften gehören:

CSS-Eigenschaften der Überlagerung

Wenn der overlay auf 1 gesetzt ist, wird der Bereich um den Markierungsrahmen oder das Cursorbild mit der CSS-Klassenauswahl gesteuert:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

CSS-Eigenschaften der Tipp-Nachricht

Das Erscheinungsbild der Tipp-Nachricht wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7flyoutviewer .s7flyoutzoomview .s7tip

Es ist möglich, Schriftstil, Größe, Erscheinungsbild und vertikalen Versatz durch CSS zu konfigurieren. Die horizontale Ausrichtung wird jedoch von der Viewer-Logik verwaltet. Das Überschreiben über CSS mithilfe von left- oder right wird nicht unterstützt.

Die Tipp-Nachricht kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel : Zum Einrichten einer halbtransparenten Spitzennachricht mit einer weißen Arial®-Schriftart mit 12 Pixel, einem Abstand von 50 Pixel vom unteren Rand der Hauptansicht, einem Abstand und einem abgerundeten Rahmen:

.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}