Dokumentation Referenshandbok för Dynamic Media Viewer

Bildtext, knapp

Senast uppdaterad: 22 juli 2024

Ämnen:

Skapat för:

Utvecklare
Användare

Med den här knappen växlar du visning av undertexter. Den är inte synlig om bildtextparametern inte har angetts.

Med CSS kan du ändra storlek på, skalförändra och placera den här knappen i förhållande till kontrollfältet som innehåller den.

Utseendet på den här knappen styrs av följande CSS-klassväljare:

.s7interactivevideoviewer .s7closedcaptionbutton

CSS-egenskaper för bildtextknappen

övre	Placera från den övre kanten, inklusive utfyllnad.
höger	Placera från den högra kanten, inklusive utfyllnad.
kvar	Placera från den vänstra kanten, inklusive utfyllnad.
nederkant	Placera från den nedre kanten, inklusive utfyllnad.
width	Helskärmsknappens bredd.
height	Helskärmsknappens höjd.
background-image	Den bild som visas för ett visst knappläge.
background-position	Placera inuti en teckningssprite, om CSS-sprites används. Se CSS-fragment.

NOTE

Den här knappen stöder både attributväljarna state och selected som kan användas för att tillämpa olika skal på olika knapplägen. I synnerhet motsvarar selected='true' läget när bildtexter är synliga och selected='false' används när bildtexter är dolda.

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel

Så här ställer du in en undertextningsknapp som är 28 x 28 pixlar. Knappen måste placeras fyra pixlar från kontrollfältets övre kant och 68 pixlar från kontrollfältets högra kant. Och den måste visa olika bilder för var och en av de fyra olika knapplägena när den är markerad eller inte är markerad.

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

recommendation-more-help