Vista de zoom flotante

La vista principal consiste en la imagen estática, la imagen ampliada que se muestra en la vista flotante, el área de navegación resaltada 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 en el á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 mostrada 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 administra 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

Resaltado del borde.

Ejemplo: para configurar el resaltado verde con una transparencia del 40 % 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

Cuando el parámetro highlightmode se establece en cursor, el resaltado se encuentra en la vista principal se reemplaza por una ilustración de cursor de tamaño fijo, que se controla con el selector de clase CSS:

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

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

Las propiedades de CSS aplicables incluyen:

CSS, propiedad

Descripción

background-image

Ilustración del cursor.

width

Ancho del cursor.

height

Altura del cursor.

NOTA

El cursor admite el selector de atributos input, que se puede utilizar para aplicar distintas ilustraciones del 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 el parámetro overlay se establece en 1, el área alrededor del marco resaltado o 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

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 de fuente, el aspecto del tamaño y el desplazamiento vertical mediante CSS. Sin embargo, la alineación horizontal se gestiona mediante la lógica del visor. No se admite su anulación mediante CSS con propiedades left o right.

CSS, propiedad

Descripción

parte inferior

Desvío desde la parte inferior de la vista principal.

color

Color de texto.

font-family

Nombre de 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 filter:alpha(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 blanca de 12 píxeles, 50 píxeles se desplazan de 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); 
}

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free