Beschriftungsschaltfläche

Diese Schaltfläche aktiviert bzw. deaktiviert die Anzeige von Bildunterschriften. Es ist nicht sichtbar, wenn der Beschriftungsparameter nicht angegeben ist.

Mithilfe von CSS können Sie diese Schaltfläche relativ zur Steuerungsleiste, in der sie enthalten ist, in der Größe, in der Skin und an der Position positionieren.

Das Erscheinungsbild dieser Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7closedcaptionbutton

CSS-Eigenschaften der Beschriftungsschaltfläche

Anfang

Position vom oberen Rand, einschließlich Auffüllung.

rechts

Position vom rechten Rand, einschließlich Auffüllung.

links

Position vom linken Rand, einschließlich Auffüllung.

unten

Position vom unteren Rand, einschließlich Auffüllung.

width

Die Breite der Schaltfläche im Vollbildmodus.

height

Die Höhe der Schaltfläche im Vollbildmodus.

background-image

Das angezeigte Bild für einen Schaltflächenstatus.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt sowohl die Attributselektoren state als auch selected, die verwendet werden können, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden. Insbesondere entspricht selected='true' dem Status, wenn Beschriftungen sichtbar sind, und selected='false' wird verwendet, wenn Beschriftungen ausgeblendet werden.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel

Um eine Untertitel-Schaltfläche mit 28 x 28 Pixeln einzurichten, die vier Pixel von oben und 68 Pixel von der rechten Kante der Steuerleiste positioniert wird und für jeden der vier verschiedenen Schaltflächenzustände ein anderes Bild anzeigt, wenn sie ausgewählt ist oder nicht.

.s7interactivevideoviewer .s7closedcaptionbutton { 
 position:absolute; 
 top:4px; 
 right:68px; 
 width:28px; 
 height:28px; 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='up'] { 
background-image:url(images/v2/ClosedCaptionButton_up.png); 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='over'] { 
background-image:url(images/v2/ClosedCaptionButton_over.png); 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='down'] { 
background-image:url(images/v2/ClosedCaptionButton_down.png); 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='true'][state='disabled'] { 
background-image:url(images/v2/ClosedCaptionButton_disabled.png); 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='up'] { 
background-image:url(images/v2/ClosedCaptionButton_disabled.png); 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='over'] { 
background-image:url(images/v2/ClosedCaptionButton_over.png); 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='down'] { 
background-image:url(images/v2/ClosedCaptionButton_down.png); 
} 
.s7interactivevideoviewer .s7closedcaptionbutton[selected='false'][state='disabled'] { 
background-image:url(images/v2/ClosedCaptionButton_disabled.png);  
}

Auf dieser Seite

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