Aktionsaufruf call-to-action

Das Call to action-Bedienfeld wird angezeigt, wenn das Video beendet wird, und zeigt alle interaktiven Farbfelder an, die mit dem jeweiligen Video verknüpft sind.

Das Bedienfeld besteht aus einem Kopfzeilenbereich mit dem Videotitel, einer Wiederholungsschaltfläche in der oberen rechten Ecke und tatsächlichen interaktiven Farbfeldern, die als scrollbares Raster angezeigt werden. Sie können den Bereich mithilfe des Konfigurationsattributs callToActionRecap deaktivieren.

Das call to action-Bedienfeld nimmt immer den gesamten verfügbaren Viewer-Bereich ein.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Hintergrundfarbe im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction

CSS-Eigenschaften der Hintergrundfarbe des call to action-Bedienfelds css-properties-of-the-background-color-of-the-call-to-action-panel

Beispiel example

So richten Sie ein call to action-Bedienfeld mit dunkelgrauem Hintergrund ein:

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

Der folgende CSS-Klassenselektor steuert die Darstellung der Kopfzeile im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7header

CSS-Eigenschaften der Kopfzeile des call to action-Bedienfelds css-properties-of-the-call-to-action-panel-header

Beispiel example-1

So richten Sie eine Kopfzeile ein, die 70 Pixel hoch ist, einen dunkelgrauen Hintergrund und einen etwas helleren grauen Rahmen mit zwei Pixeln am unteren Rand aufweist:

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

Der folgende CSS-Klassenselektor steuert die Darstellung des Kopfzeilentitels im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

CSS-Eigenschaften des Kopfzeilentitels im call to action-Bedienfeld: css-properties-of-the-header-title-in-the-call-to-action-panel

Beispiel example-2

So richten Sie einen Videotitel mit einer Zeilenhöhe von 70 Pixel, einer Schriftgröße von 25 Pixel, einer weißen Farbe und einer linksbündigen Ausrichtung ein:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Schaltfläche „Schließen“ im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

CSS-Eigenschaften der Schließen-Schaltfläche im call to action-Bedienfeld: css-properties-of-the-close-button-in-the-call-to-action-panel

Beispiel example-3

So richten Sie eine Wiedergabeschaltfläche ein, die 28 x 28 Pixel groß ist. Die Schaltfläche muss 20 Pixel vom oberen und rechten Rand der Kopfzeile entfernt positioniert werden. Außerdem muss für jeden der vier verschiedenen Schaltflächenzustände ein anderes Bild angezeigt werden. Nimmt das Bildmaterial aus dem Sprite-Bild der Komponente:

.s7interactivevideoviewer .s7calltoaction .s7closebutton {
 top: 20px;
 right: 20px;
 background-size: 336px;
 width: 28px;
 height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
 background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
 background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
 background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
 background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
 background-position: -0px -1232px;
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniaturansicht-Rasteransicht im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

CSS-Eigenschaften der Rasteransicht für Miniaturansichten im call to action-Bedienfeld: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

Beispiel example-4

So richten Sie einen Bereich für Miniaturen mit dunkelgrauem Hintergrund ein:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniaturzelle im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

CSS-Eigenschaften der Faustzelle im call to action-Bedienfeld: css-properties-of-the-thumbcell-in-the-call-to-action-panel

Beispiel example-5

So legen Sie einen horizontalen Abstand von 24 Pixel und einen vertikalen Abstand von 18 Pixel fest:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

Der folgende CSS-Klassenselektor steuert die Darstellung der Miniaturansicht im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumb

CSS-Eigenschaften der Miniaturansicht im call to action-Bedienfeld: css-properties-of-the-thumbnail-in-the-call-to-action-panel

Beispiel example-6

So richten Sie Miniaturen mit 94 x 100 Pixel ein:

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

Der folgende CSS-Klassenselektor steuert die Darstellung der Miniaturbildbeschriftung im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7label

CSS-Eigenschaften der Miniaturbildbeschriftung im call to action-Bedienfeld: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

Beispiel example-7

Um Bezeichnungen einzurichten, die eine weiße Farbe verwenden, richten Sie sie um 15 Pixel zentriert aus und verwenden Sie eine Arial®-Schriftart:

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

Wenn mehr Miniaturen vorhanden sind, als vertikal in die Ansicht passen, wird für die Miniaturen eine vertikale Bildlaufleiste auf der rechten Seite gerendert. Standardmäßig rendert das call to action-Bedienfeld einen winzigen vertikalen Balken ohne die Schaltflächen „Daumen“ und „Bildlauf“. Es ist jedoch möglich, die Leiste anzupassen, indem die Viewer-CSS geändert wird.

Der folgende CSS-Klassenselektor steuert die Darstellung des Bildlaufleistenbereichs im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

CSS-Eigenschaften des Bildlaufleistenbereichs im call to action-Bedienfeld: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

Beispiel example-8

So richten Sie eine Bildlaufleiste ein, die 22 Pixel breit ist und keinen Rand vom oberen, rechten oder unteren Rand des Bereichs „Miniaturen“ hat:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

Die Bildlaufleistenspur ist der Bereich zwischen den Schaltflächen der oberen und unteren Bildlaufleiste. Die Komponente legt automatisch die Position und Höhe der Spur fest.

Der folgende CSS-Klassenselektor steuert die Darstellung der Bildlaufleisten-Spur im call to action-Bedienfeld:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-Eigenschaften der Bildlaufspurleiste css-properties-of-the-scroll-track-bar

Beispiel example-9

So richten Sie eine Bildlaufleistenspur ein, die 22 Pixel breit ist und eine graue Farbe aufweist:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

Der Daumen der Bildlaufleiste bewegt sich vertikal innerhalb des Bereichs der Bildlaufspur. Die vertikale Position wird vollständig von der Komponentenlogik gesteuert. Die Höhe des Daumens ändert sich jedoch je nach Inhaltsmenge nicht dynamisch.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Daumenhöhe und anderer Aspekte:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-Eigenschaften der Daumenhöhe im call to action-Bedienfeld: css-properties-of-the-thumb-height-in-the-call-to-action-panel

Beispiel example-10

So richten Sie einen Bildlaufleisten-Daumen mit 6 x 167 Pixeln ein, hat drei abgerundete Pixel und eine graue Farbe:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

Der folgende CSS-Klassenselektor steuert die Darstellung der oberen und unteren Bildlaufschaltflächen:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Scroll-Schaltflächen können nicht mit den CSS-Eigenschaften „oben“, „links“, „unten“ oder „rechts“ positioniert werden. Die Viewer-Logik positioniert sie automatisch. Das call to action-Bedienfeld im interaktiven Video-Viewer verwendet diese Schaltflächen nicht in der Bildlaufleiste, sodass ihre Größe in der Standard-CSS auf 0 Pixel festgelegt ist.

CSS-Eigenschaften der oberen und unteren Bildlaufschaltflächen im call to action-Bedienfeld: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen.

Beispiel example-11

Deaktivieren Sie Bildlaufschaltflächen, indem Sie ihre Größe auf 0 setzen und sie ausblenden:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}