Visualização de zoom de menu suspenso

A exibição principal consiste na imagem estática, na imagem com zoom mostrada na exibição do flyout, na área de navegação do destaque exibida sobre a imagem estática e na mensagem de dica mostrada sobre a imagem estática.

Se as dimensões da imagem que está sendo visualizada não corresponderem às dimensões da exibição de zoom do flyout, o conteúdo da imagem será centralizado na área de exibição do retângulo da exibição de zoom do flyout.

Propriedades CSS da exibição principal

A aparência da exibição principal é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview

Propriedade CSS

Descrição

cor do fundo

A cor de plano de fundo da exibição principal.

Exemplo - para tornar a exibição principal transparente:

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

Propriedades de CSS da exibição de flyout

A aparência da exibição do flyout é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Propriedade CSS

Descrição

left

A posição horizontal da exibição do flyout, em relação ao canto superior esquerdo da exibição principal.

top

A posição vertical da exibição do flyout, em relação ao canto superior esquerdo da exibição principal.

width

A largura da exibição do flyout.

altura

A altura da exibição do flyout.

border

A borda da exibição do flyout.

Exemplo - para configurar uma exibição de flyout para 600 x 400 pixels, que aparece com deslocamento de 100 pixels à direita da exibição principal de 512 x 288 mostrada no exemplo anterior:

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

Propriedades CSS do destaque na exibição principal

A aparência do realce na exibição principal é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

É possível controlar o plano de fundo, a borda, a transparência e atributos semelhantes usando CSS. No entanto, o tamanho e a posição do elemento DOM de destaque são gerenciados pela lógica do visualizador. Não há suporte para substituí-lo por CSS.

Propriedade CSS

Descrição

cor do fundo

A cor do destaque.

opacidade

Realce a opacidade.

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

border

O realce da borda.

Exemplo - para configurar um realce verde com transparência de 40% e uma borda vermelha de um pixel:

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

Propriedades CSS do cursor

Quando o parâmetro highlightmode é definido como cursor, os realces estão na exibição principal e são substituídos por uma arte-final de cursor de tamanho fixo, que é controlada pelo seletor de classe CSS:

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

É possível controlar a imagem de fundo e o tamanho usando CSS.

As propriedades CSS aplicáveis incluem:

Propriedade CSS

Descrição

imagem de fundo

Arte do cursor.

largura

Largura do cursor.

altura

Altura do cursor.

OBSERVAÇÃO

O cursor suporta o seletor de atributo input, que pode ser usado para aplicar arte-final de cursor e tamanho diferentes para dispositivos diferentes. Especificamente, input="mouse" corresponde aos sistemas de desktop e input="touch" corresponde aos dispositivos de toque.

Propriedades CSS da sobreposição

Quando o parâmetro overlay é definido como 1, a área em torno do quadro de realce ou da imagem do cursor é controlada com o seletor de classe CSS:

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

Propriedade CSS

Descrição

cor do fundo

Cor da sobreposição.

opacidade

Opacidade de sobreposição.

Propriedades CSS da mensagem de dica

A aparência da mensagem de dica é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7tip

É possível configurar o estilo da fonte, a aparência do tamanho e o deslocamento vertical por meio do CSS. No entanto, o alinhamento horizontal é gerenciado pela lógica do visualizador. Não há suporte para substituí-lo por meio de CSS usando propriedades left ou right.

Propriedade CSS

Descrição

bottom

Deslocamento na parte inferior da exibição principal.

color

Cor do texto.

família de fontes

Nome da fonte.

tamanho da fonte

Tamanho da fonte.

preenchimento

Preenchimento em torno do texto da mensagem.

cor do fundo

Cor de preenchimento do plano de fundo do texto da mensagem.

border-radius

Raio da borda do plano de fundo do texto da mensagem.

opacidade

Opacidade do texto da mensagem em segundo plano.

Para o Internet Explorer 8, use filter:alpha(opacity-...) )

A mensagem de dica pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar uma mensagem de ponta semitransparente com fonte branca Arial 12px, 50 pixels deslocados da parte inferior da exibição principal, preenchimento e uma borda arredondada:

.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); 
}

Nesta 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
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now