Flyout-Zoom-Ansicht

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

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

CSS-Eigenschaften der Haupt-Ansicht

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

.s7flyoutviewer .s7flyoutzoomview

CSS-Eigenschaft

Beschreibung

background-color

Die Hintergrundfarbe der Haupt-Ansicht.

Beispiel: So machen Sie die Ansicht transparent:

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

CSS-Eigenschaften der Flyout-Ansicht

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

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

CSS-Eigenschaft

Beschreibung

links

Die horizontale Position der Flyout-Ansicht, relativ zur oberen linken Ecke der Ansicht.

Anfang

Die vertikale Position der Flyout-Ansicht, relativ zur oberen linken Ecke der Haupt-Ansicht.

width

Die Breite der Flyout-Ansicht.

height

Die Höhe der Flyout-Ansicht.

rand

Der Rand der Flyout-Ansicht.

Beispiel: So richten Sie eine Flyout-Ansicht auf 600 x 400 Pixel ein, die mit 100 Pixel Abstand rechts von der im vorherigen Beispiel gezeigten 512 x 288-Ansicht angezeigt wird:

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

CSS-Eigenschaften der Hervorhebung in der Haupt-Ansicht

Das Erscheinungsbild der Hervorhebung in der Haupt-Ansicht 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 DOM-Elements für das Hervorheben wird jedoch von der Viewer-Logik verwaltet. Das Überschreiben durch CSS wird nicht unterstützt.

CSS-Eigenschaft

Beschreibung

background-color

Die Farbe der Hervorhebung.

Deckkraft

Markieren Sie Deckkraft.

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

rand

Die Randhervorhebung.

Beispiel: So richten Sie grüne Hervorhebung mit 40 % Transparenz und einem roten Rand von 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 der Parameter highlightmode auf cursor eingestellt ist, werden die Hervorhebungen in der Hauptversion durch die Cursorgrafik mit fester Ansicht ersetzt, die mit der CSS-Klassenauswahl gesteuert wird:

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

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

Zu den CSS-Eigenschaften gehören:

CSS-Eigenschaft

Beschreibung

background-image

Cursorgrafik.

width

Cursorbreite.

height

Cursorhöhe.

HINWEIS

Cursor unterstützt die Attributauswahl input, 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 eingestellt ist, wird der Bereich um den Markierungsrahmen oder das Cursorbild mit dem CSS-Klassenselektor gesteuert:

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

CSS-Eigenschaft

Beschreibung

background-color

Überlagerungsfarbe.

Deckkraft

Deckkraft der Überlagerung.

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ößendarstellung und vertikalen Versatz mithilfe von 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 Haupt-Ansicht.

color

Textfarbe.

font-family

Schriftname.

font-size

Schriftgröße.

Padding

Umrandung des Nachrichtentextes.

background-color

Hintergrundfüllfarbe des Nachrichtentextes.

border-radius

Rahmenradius des Nachrichtentextes im Hintergrund

Deckkraft

Hintergrunddeckkraft des Nachrichtentextes.

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

Die Tippmeldung kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie eine halbtransparente Tipp-Meldung mit einer weißen Arial-12-Pixel-Schrift ein, die um 50 Pixel vom unteren Rand der Ansicht, einer Auffüllung und einem gerundeten Rand versetzt ist:

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

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now