Muestras interactivas interactive-swatches

El panel de muestras interactivo aparece junto al contenido del vídeo si los datos interactivos se han pasado al visor en la configuración. Consiste en un banner en la parte superior que procesa texto como "Haga clic para ver", una columna de una o más muestras interactivas y dos botones de desplazamiento (disponibles solo en sistemas de escritorio).

En sistemas de escritorio y dispositivos táctiles, con orientación horizontal, las muestras interactivas se representan verticalmente a la derecha del contenido de vídeo. En los dispositivos táctiles con orientación vertical, aparecen en la parte inferior del visor como una fila horizontal de muestras.

El siguiente selector de clase CSS controla la ubicación y la orientación del panel de muestras interactivo:

.s7interactivevideoviewer .s7interactiveswatches

Propiedades CSS de las muestras interactivas css-properties-of-the-interactive-swatches

width
Anchura del panel de muestras interactivo
height
Altura del panel de muestras interactivo.
parte superior
Posición superior del panel de muestras interactivo.
parte inferior
Posición inferior del panel de muestras interactivo.
izquierda
Posición izquierda del panel de muestras interactivo.
derecha
Posición derecha del panel de muestras interactivo.

La ubicación y orientación en tiempo de ejecución del panel de muestras interactivo se define mediante una combinación de las propiedades CSS anteriores de la siguiente manera:

  • Para procesar muestras interactivas horizontalmente en la parte inferior del visor, establezca la altura en un valor de píxel absoluto; izquierda e inferior en 0px; anchura, derecha y arriba en auto.
  • Para procesar muestras interactivas verticalmente a la derecha del contenido de vídeo, establezca la anchura en un píxel absoluto; la derecha y la parte superior en 0px; la altura, la izquierda y la parte inferior en auto.

Es posible utilizar marcadores CSS con este estilo para lograr la ubicación adaptable del panel de muestras interactivo.

Ejemplo example

Para configurar un panel de muestras interactivo para que se procese horizontalmente en la parte inferior del visor en dispositivos táctiles con orientación horizontal. Y, para mostrarlo verticalmente a la derecha del contenido del vídeo en todos los demás casos:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
 width:120px;
 height:auto;
 right:0px;
 top:0px;
 left:auto;
 bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
 width:auto;
 height:136px;
 right:auto;
 top:auto;
 left:0px;
 bottom:0px;
}

El tamaño y la posición del banner lo administra el componente de muestras interactivas en función de otros estilos aplicados con CSS y no se pueden establecer explícitamente.

El siguiente selector de clase CSS controla el aspecto del panel del banner:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Propiedades CSS del panel del banner css-properties-of-the-banner-panel

background-color
Color de fondo del panel del titular.
color
Color del texto dentro del panel del titular.
borde
Borde alrededor del panel del titular.
font-weight
Grosor de fuente que se utilizará para el texto del panel del titular.
font-size
Tamaño de fuente que se utilizará para el texto del panel del titular.
font-family
La familia de fuentes que se utilizará para el texto dentro del panel del titular.
font-align
Alineación de fuente que se utilizará para el texto del panel del titular.

La información del objeto del titular se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo section-e8caea0a303c425a8a637c2a47c06355

Para configurar un titular con fondo gris oscuro, borde gris más claro de dos píxeles y texto blanco centrado horizontalmente:

.s7interactivevideoviewer .s7interactiveswatches .s7banner {
    background-color: #222222;
    border-bottom: 2px solid #444444;
    color: #ffffff;
    text-align: center;
}

El siguiente selector de clase CSS controla el aspecto de las muestras:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

Propiedades CSS del área de muestras css-properties-of-the-swatches-area

background-color
Color de fondo del área de muestras.

Ejemplo section-9cadd62a09fd44a280f55ff42437e416

Para configurar el área de muestras con fondo gris oscuro:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
    background-color: #222222;
}

El siguiente selector de clase CSS controla el espaciado entre las miniaturas de muestra:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Propiedades CSS del espaciado de miniaturas de muestras css-properties-of-the-swatches-thumbnail-spacing

margin
El tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado de miniaturas real es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell .

Ejemplo section-39fb270b7e494a9d99e6e8f6890ec53c

Para configurar el espaciado vertical en diez píxeles:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

El siguiente selector de clase CSS controla el aspecto de las miniaturas individuales:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

Propiedades CSS del aspecto de las miniaturas individuales css-properties-of-the-appearance-of-individual-thumbnails

width
Ancho de la miniatura.
height
Altura de la miniatura.
borde
Borde de la miniatura.
NOTE
La miniatura admite state selector de atributos, que puede utilizar para aplicar diferentes aspectos a diferentes estados de miniaturas. En particular, state="selected" corresponde a la miniatura de la imagen seleccionada actualmente; state="default" corresponde al resto de miniaturas; state="over" se utiliza al pasar el ratón por encima.

Ejemplo section-69fec189ffaa440b97b6b846c320b75b

Para configurar miniaturas de 100 x 75 píxeles:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
 width:100px;
 height:75px;
}

El siguiente selector de clase CSS controla el aspecto de la etiqueta de miniatura:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

Propiedades CSS del aspecto de la etiqueta de miniatura css-properties-of-the-appearance-of-the-thumbnail-label

color
Color del texto.
borde
Borde de etiqueta.
text-align
Alineación de texto horizontal.
font-family
Nombre de la fuente.

Ejemplo section-eb141eb6c1154183baa69796edb90536

Para configurar etiquetas para que utilicen blanco, 12 píxeles, alineado a la izquierda, en fuente Helvetica® y un borde inferior:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
 border-bottom: 1px solid #e9e9e9;
 text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}

El siguiente selector de clase CSS controla el aspecto de los botones de desplazamiento hacia arriba y hacia abajo:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

No es posible colocar los botones de desplazamiento mediante CSS top, left, bottom, y right propiedades; en su lugar, la lógica del visor las coloca automáticamente.

Propiedades CSS del aspecto de los botones de desplazamiento arriba y abajo css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

width
Ancho del botón de desplazamiento.
height
Altura del botón de desplazamiento.
background-image
Imagen que se muestra para un estado de botón determinado.
background-position

La posición dentro del sprite de la ilustración, si se utilizan sprites CSS.

Consulte también Sprites CSS.

NOTE
Este botón admite el state selector de atributos, que puede utilizar para aplicar diferentes aspectos a los estados de los botones: up", " down", " over", y " disabled".

La información sobre herramientas de los botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo section-e6ce4fa084b84288bc7583342b2c510c

Para configurar un botón de desplazamiento hacia arriba de 60 x 36 píxeles, tenga una ilustración diferente para cada estado y tome esa ilustración de la imagen de Sprite del componente:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
 background-size: 120px;
 width: 60px;
 height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8