Flyout-Zoom-Ansicht

Die Hauptansicht besteht aus dem statischen Bild und dem gezoomten Bild, das in der Flyout-Ansicht über dem statischen Bild angezeigt wird. Es besteht auch aus der Tipp-Meldung, die auf dem statischen Bild angezeigt wird.

CSS-Eigenschaften der Hauptansicht

Das Erscheinungsbild der Hauptansicht wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7flyoutviewer .s7flyoutzoomview

Beispiel - um die Hauptansicht transparent zu machen:

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

CSS-Eigenschaften der Tippmeldung

Das Erscheinungsbild der Tipp-Meldung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

Die Tipp-Nachricht kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

.

Beispiel: Zum Einrichten einer halbtransparenten Tipp-Meldung mit weißer Arial® 12-px-Schriftart, 50 Pixel Offset vom unteren Rand der Hauptansicht, Abstand und gerundeter 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);
}