Vista de zoom flotante flyout-zoom-view

La vista principal consta de la imagen estática y la imagen ampliada que se muestra en la vista flotante. También consta del área de navegación de resalte que se muestra sobre la imagen estática y el mensaje de sugerencia que se muestra sobre la imagen estática.

Si las dimensiones de la imagen que se está visualizando no coinciden con las dimensiones de la vista de zoom flotante, el contenido de la imagen se centra dentro del área de visualización rectangular de la vista de zoom flotante.

Propiedades CSS de la vista principal

El aspecto de la vista principal se controla con el siguiente selector de clase CSS:

.s7flyoutviewer .s7flyoutzoomview
Propiedad CSS
Descripción
background-color
Color de fondo de la vista principal.

Ejemplo: para hacer transparente la vista principal:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

Propiedades CSS de la vista flotante

El aspecto de la vista flotante se controla con el siguiente selector de clase CSS:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
Propiedad CSS
Descripción
izquierda
La posición horizontal de la vista flotante, en relación con la esquina superior izquierda de la vista principal.
parte superior
Posición vertical de la vista flotante, con relación a la esquina superior izquierda de la vista principal.
width
Ancho de la vista flotante.
height
Altura de la vista flotante.
borde
Borde de la vista flotante.

Ejemplo: para configurar una vista flotante en 600 x 400 píxeles, que aparece con un desplazamiento de 100 píxeles a la derecha de la vista principal de 512 x 288 que se muestra en el ejemplo anterior:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

Propiedades CSS del resaltado en la vista principal

El aspecto del resaltado en la vista principal se controla con el siguiente selector de clase CSS:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

Es posible controlar los atributos de fondo, borde, transparencia y similares mediante CSS. Sin embargo, el tamaño y la posición del elemento DOM de resaltado se administran mediante la lógica del visor. No se admite la anulación mediante CSS.

Propiedad CSS
Descripción
background-color
El color del resaltado.
opacidad

Resaltar la opacidad.

Para Internet Explorer 8, utilice filter:alpha(opacity-...) );

borde
El resaltado de borde.

Ejemplo: para configurar el resaltado verde con un 40 % de transparencia y un borde rojo de un píxel:

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

Propiedades CSS del cursor

Cuándo highlightmode El parámetro se ha establecido en cursor, las áreas resaltadas en la vista principal se sustituyen por ilustraciones de cursor de tamaño fijo, que se controlan con el selector de clases CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

Es posible controlar la imagen de fondo y el tamaño mediante CSS.

Las propiedades CSS aplicables incluyen:

Propiedad CSS
Descripción
background-image
Ilustración del cursor.
width
Ancho del cursor.
height
Altura del cursor.
NOTE
El cursor admite input selector de atributos, que se puede utilizar para aplicar distintas ilustraciones de cursor y tamaños a distintos dispositivos. En particular, input="mouse" corresponde a los sistemas de escritorio y input="touch" corresponde a los dispositivos táctiles.

Propiedades CSS de la superposición

Si la variable overlay El parámetro se ha establecido en 1, el área alrededor del marco resaltado o la imagen del cursor se controla con el selector de clases CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay
Propiedad CSS
Descripción
background-color
Color de superposición.
opacidad
Opacidad de superposición.

Propiedades CSS del mensaje de sugerencia

El aspecto del mensaje de sugerencia se controla con el siguiente selector de clase CSS:

.s7flyoutviewer .s7flyoutzoomview .s7tip

Es posible configurar el estilo, el tamaño, el aspecto y el desplazamiento vertical de la fuente mediante CSS. Sin embargo, la alineación horizontal la administra la lógica del visor. Anularlo mediante CSS mediante left o right no se admite esta propiedad.

Propiedad CSS
Descripción
parte inferior
Desplazamiento desde la parte inferior de la vista principal.
color
Color del texto.
font-family
Nombre de la fuente.
font-size
Tamaño de fuente.
relleno
Relleno alrededor del texto del mensaje.
background-color
Color de relleno de fondo del texto del mensaje.
border-radius
Radio del borde de fondo del texto del mensaje.
opacidad

Opacidad de fondo del texto del mensaje.

Para Internet Explorer 8, utilice filtro:alfa(opacidad-...) )

El mensaje de sugerencia se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar un mensaje de sugerencia semitransparente con una fuente Arial® blanca de 12 píxeles, un desplazamiento de 50 píxeles desde la parte inferior de la vista principal, relleno y borde redondeado:

.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8