El panel Muestras interactivas aparece junto al contenido del vídeo si se han pasado datos interactivos al visor en la configuración. Consiste en un banner en la parte superior que representa texto como "Haga clic para ver", una columna de uno o más muestras interactivas y dos botones de desplazamiento (disponibles solo en sistemas de escritorio).
En sistemas de escritorio y en dispositivos táctiles, en orientación horizontal, los muestras interactivas se representan verticalmente a la derecha del contenido de vídeo. En dispositivos táctiles en orientación vertical, aparecen en la parte inferior del visor como una fila horizontal de muestras.
El selector de clase CSS siguiente controla la ubicación y la orientación del panel de muestras interactivo:
.s7interactivevideoviewer .s7interactiveswatches
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 interactivas se definen mediante una combinación de las propiedades CSS anteriores de la siguiente manera:
Es posible utilizar marcadores CSS con este estilo para lograr la colocación adaptativa del panel de muestras interactivo.
Configuración de un panel de muestras interactivo para representarlo horizontalmente en la parte inferior del visor en dispositivos táctiles en 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 gestiona el componente de muestras interactivas basado en otro estilo aplicado con CSS y no se puede establecer explícitamente.
El siguiente selector de clase CSS controla el aspecto del panel del banner:
.s7interactivevideoviewer .s7interactiveswatches .s7banner
background-color |
Color de fondo del panel del banner. |
color |
Color del texto dentro del panel del banner. |
borde |
Borde alrededor del panel del banner. |
font-weight |
Peso de la fuente que se utilizará para el texto dentro del panel del banner. |
font-size |
El tamaño de fuente que se utilizará para el texto dentro del panel del banner. |
font-family |
La familia de fuentes que se utilizará para el texto dentro del panel del banner. |
font-align |
Alineación de fuente que se utilizará para el texto dentro del panel del banner. |
La información del objeto del banner se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Para configurar un banner con fondo gris oscuro, borde más claro de dos píxeles y el 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
background-color |
Color de fondo del área de muestras. |
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 miniaturas de muestra:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
margin |
El tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado en miniatura real es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell . |
Para configurar el espaciado vertical para que sea de 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
width |
Anchura de la miniatura. |
height |
Altura de la miniatura. |
borde |
Borde de la miniatura. |
La miniatura admite el selector de atributos state
, que puede utilizar para aplicar diferentes aspectos a distintos estados de miniaturas. En concreto, 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.
Para configurar miniaturas de 100 x 75 píxeles:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
El selector de clase CSS siguiente controla el aspecto de la etiqueta de miniatura:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
color |
Color de texto. |
borde |
Borde de la etiqueta. |
text-align |
Alineación de texto horizontal. |
font-family |
Nombre de la fuente. |
Para configurar etiquetas para utilizar alineadas a la izquierda, blancas, 12 píxeles, en la 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 selector de clase CSS siguiente 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.
width |
Anchura del botón de desplazamiento. |
height |
Altura del botón de desplazamiento. |
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Posición dentro del sprite de ilustración, si se utilizan sprites CSS. Consulte también Sprites CSS . |
Este botón admite el selector de atributos state
, que puede utilizar para aplicar diferentes aspectos a los estados de botones: " up
", " down
", " over
" y " disabled
".
La información sobre herramientas de botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Para configurar el botón de desplazamiento hacia arriba que sea de 60 x 36 píxeles, tenga distintas ilustraciones para cada estado y tome esa ilustración de la imagen 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; }