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
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
La información del objeto del titular se puede localizar. Consulte Localización de 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
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
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
state
, 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 las 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
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 utilizando las propiedades CSS top
, left
, bottom
y right
; en su lugar, la lógica del visor los 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
state
, 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 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; }