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:

.s7videoviewer .s7closedcaptionbutton

CSS-egenskaper för bildtextknappen

övrePlacera från den övre kanten, inklusive utfyllnad.
högerPlacera från den högra kanten, inklusive utfyllnad.
kvarPlacera från den vänstra kanten, inklusive utfyllnad.
nederkantPlacera från den nedre kanten, inklusive utfyllnad.
widthHelskärmsknappens bredd.
heightHelskärmsknappens höjd.
background-imageDen 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

Om du vill ställa in en undertextningsknapp som är 28 x 28 pixlar och placerad fyra pixlar uppifrån och 68 pixlar från kontrollfältets högra kant. Och slutligen, visar en annan bild för vart och ett av de fyra olika knapplägena när de är markerade eller inte markerade.

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