Flyout-Zoomansicht flyout-zoom-view

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

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 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);
}