Flyout-Zoom-Ansicht flyout-zoom-view

Die Hauptansicht besteht aus dem statischen Bild und dem gezoomten Bild, das in der Flyout-Ansicht angezeigt wird. Sie besteht außerdem aus dem markierten Navigationsbereich, der über dem statischen Bild angezeigt wird, und der Tipp-Meldung, die über dem statischen Bild angezeigt wird.

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

CSS-Eigenschaften der Hauptansicht

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

.s7flyoutviewer .s7flyoutzoomview
CSS-Eigenschaft
Beschreibung
background-color
Die Hintergrundfarbe der Hauptansicht.

Beispiel - um die Hauptansicht transparent zu machen:

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

CSS-Eigenschaften der Flyout-Ansicht

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

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
CSS-Eigenschaft
Beschreibung
left
Die horizontale Position der Flyout-Ansicht, relativ zur oberen linken Ecke der Hauptansicht.
top
Die vertikale Position der Flyout-Ansicht relativ zur oberen linken Ecke der Hauptansicht.
width
Die Breite der Flyout-Ansicht.
Höhe
Die Höhe der Flyout-Ansicht.
border
Der Rahmen der Flyout-Ansicht.

Beispiel: Um eine Flyout-Ansicht auf 600 x 400 Pixel einzurichten, die mit einem Offset von 100 Pixel rechts von der Hauptansicht von 512 x 288 angezeigt wird, wie im vorherigen Beispiel gezeigt:

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

CSS-Eigenschaften der Hervorhebung in der Hauptansicht

Das Erscheinungsbild der Hervorhebung in der Hauptansicht wird mit der folgenden CSS-Klassenauswahl 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.

CSS-Eigenschaft
Beschreibung
background-color
Die Farbe der Markierung.
Deckkraft

Deckkraft hervorheben.

Verwenden Sie für Internet Explorer 8 filter:alpha(opacity-..);

border
Die Randhervorhebung.

Beispiel: Einrichten einer grünen Hervorhebung mit 40 % Transparenz und einem roten Rahmen von einem Pixel:

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

CSS-Eigenschaften des Cursors

Wenn der Parameter highlightmode auf cursor gesetzt ist, wird die Hervorhebung in der Hauptansicht durch die Bilddarstellung des Cursors mit fester Größe ersetzt, die mit dem CSS-Klassenselektor gesteuert wird:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

Es ist möglich, das Hintergrundbild und die Größe mithilfe von CSS zu steuern.

Zu den anwendbaren CSS-Eigenschaften gehören:

CSS-Eigenschaft
Beschreibung
background-image
Cursorgrafik.
width
Cursorbreite.
Höhe
Cursorhöhe.
NOTE
Cursor unterstützt die “input”-Attributauswahl, mit der verschiedene Cursorgrafiken und -größen auf verschiedene Geräte angewendet werden können. Insbesondere entspricht input="mouse" den Desktop-Systemen und input="touch" den Touch-Geräten.

CSS-Eigenschaften der Überlagerung

Wenn der Parameter overlay auf 1 gesetzt ist, wird der Bereich um den Hervorhebungsrahmen oder das Cursorbild mit dem CSS-Klassenselektor gesteuert:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS-Eigenschaft
Beschreibung
background-color
Überlagerungsfarbe.
Deckkraft
Überlagerungsdeckkraft.

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. Das Überschreiben durch CSS mit den Eigenschaften left oder right wird nicht unterstützt.

CSS-Eigenschaft
Beschreibung
unten
Versatz unten in der Hauptansicht.
color
Textfarbe.
Schriftfamilie
Schriftname.
font-size
Schriftgröße.
Auffüllung
Auffüllung um den Nachrichtentext.
background-color
Hintergrundfüllfarbe des Nachrichtentextes.
border-radius
Hintergrundrahmenradius des Nachrichtentextes
Deckkraft

Hintergrunddeckkraft des Nachrichtentextes.

Verwenden Sie für Internet Explorer 8 filter:alpha(opacity-..) )

Die Tipp-Nachricht kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen .

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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8