Schaltfläche „Beschriftung“
Erstellt für:
- Entwickler
- Benutzende
Schaltet die Anzeige von Untertiteln ein und aus. Sie ist nicht sichtbar, wenn der Beschriftungsparameter nicht angegeben ist. Mit CSS können Sie diese Schaltfläche in Bezug auf die Symbolleiste, die sie enthält, skalieren, verschieben und positionieren.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7mixedmediaviewer .s7closedcaptionbutton
CSS-Eigenschaft | Beschreibung |
---|---|
Top- | Position ab dem oberen Rahmen, einschließlich Auffüllung. |
rechte | Position vom rechten Rand aus, einschließlich Abstand. |
linker | Position vom linken Rand aus, einschließlich Auffüllung. |
untere | Position ab dem unteren Rand, einschließlich Abstand. |
Breite | Breite der Schaltfläche. |
Höhe | Höhe der Schaltfläche. |
Hintergrundbild- | Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
Hintergrundposition |
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden. Siehe von CSS-Sprites. |
state
und ausgewählten Attributauswahl, mit denen verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht selected='true'
dem Status, wenn Beschriftungen sichtbar sind, und selected='false'
wird verwendet, wenn Beschriftungen ausgeblendet sind.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel : Zum Einrichten einer Schaltfläche für Untertitel mit einer Größe von 28 x 28 Pixel, die vier Pixel vom oberen und 68 Pixel vom rechten Rand der Steuerleiste entfernt positioniert wird. Und schließlich zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an, wenn ausgewählt oder nicht ausgewählt.
.s7mixedmediaviewer .s7closedcaptionbutton {
position:absolute;
top:4px;
right:68px;
width:28px;
height:28px;
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}