La vista principal consiste en la imagen estática y la imagen ampliada mostrada en la vista flotante. También consta del área de navegación de resaltado 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á viendo 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
CSS, propiedad |
Descripción |
---|---|
background-color |
Color de fondo de la vista principal. |
Ejemplo: para que la vista principal sea transparente:
.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
CSS, propiedad |
Descripción |
---|---|
izquierda |
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, en relación con 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 a 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 el fondo, el borde, la transparencia y atributos similares mediante CSS. Sin embargo, la lógica del visor gestiona el tamaño y la posición del elemento DOM de resaltado. No se puede anular mediante CSS.
CSS, propiedad |
Descripción |
---|---|
background-color |
Color del resaltado. |
opacidad |
Resalte la opacidad. Para Internet Explorer 8, utilice filter:alpha(opacity-...) ); |
borde |
El resaltado del 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
When highlightmode
se establece en cursor
, el resaltado se encuentra en la vista principal y se sustituye por una ilustración de cursor de tamaño fijo, que se controla con el selector de clases CSS:
.s7flyoutviewer .s7flyoutzoomview
.s7cursor
Es posible controlar la imagen de fondo y el tamaño mediante CSS.
Las propiedades de CSS aplicables incluyen:
CSS, propiedad |
Descripción |
---|---|
imagen de fondo |
Ilustración del cursor. |
width |
Anchura del cursor. |
height |
Altura del cursor. |
El cursor es compatible con input
selector de atributos, que puede utilizarse para aplicar diferentes ilustraciones de cursor y tamaños para 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
Cuando la variable overlay
se establece en 1
, el área alrededor del marco de resaltado o de la imagen del cursor se controla con el selector de clase CSS:
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS, propiedad |
Descripción |
---|---|
background-color |
Color de superposición. |
opacidad |
Superponga la opacidad. |
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, la apariencia y el desplazamiento vertical de la fuente mediante CSS. Sin embargo, la alineación horizontal la gestiona la lógica del visor. Sobrescribir mediante CSS usando left
o right
no se admiten propiedades de .
CSS, propiedad |
Descripción |
---|---|
parte inferior |
Desplazamiento desde la parte inferior de la vista principal. |
color |
Color de 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 |
La opacidad del fondo del texto del mensaje. Para Internet Explorer 8, utilice filtro:alfa(opacity-...) |
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 punta semitransparente con una fuente Arial® de 12 píxeles y blanco, 50 píxeles de desplazamiento desde la parte inferior de la vista principal, el relleno y un 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);
}