Visualização de zoom do Flyout

A visualização principal consiste na imagem estática, na imagem ampliada mostrada na visualização de flyout, na área de navegação de realce 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 visualização de zoom flyout, o conteúdo da imagem será centralizado na área de exibição do retângulo de zoom flyout visualização.

Propriedades de CSS da visualização principal

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

.s7flyoutviewer .s7flyoutzoomview

Propriedade CSS

Descrição

cor de fundo

A cor de fundo da visualização principal.

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

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

Propriedades de CSS da visualização flyout

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

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Propriedade CSS

Descrição

left

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

top

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

width

A largura da visualização flyout.

altura

A altura da visualização voadora.

fronteira

A borda da visualização do flyout.

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

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

Propriedades de CSS do destaque na visualização principal

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

.s7flyoutviewer .s7flyoutzoomview .s7highlight

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

Propriedade CSS

Descrição

cor de fundo

A cor do realce.

opacidade

Realce a opacidade.

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

fronteira

O realce da borda.

Exemplo - para configurar o realce verde com 40% de transparência 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 de CSS do cursor

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

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

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

As propriedades CSS aplicáveis incluem:

Propriedade CSS

Descrição

background-image

Arte do cursor.

largura

Largura do cursor.

altura

Altura do cursor.

OBSERVAÇÃO

O cursor oferece suporte ao seletor de atributos input, que pode ser usado para aplicar artes e tamanhos de cursor diferentes para dispositivos diferentes. Especificamente, input="mouse" corresponde aos sistemas de desktop e input="touch" corresponde aos dispositivos de toque.

Propriedades de CSS da sobreposição

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

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

Propriedade CSS

Descrição

cor de fundo

Cor da sobreposição.

opacidade

Opacidade da sobreposição.

Propriedades de 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. Entretanto, o alinhamento horizontal é gerenciado pela lógica do visualizador. Não há suporte para substituir por CSS usando as propriedades left ou right.

Propriedade CSS

Descrição

bottom

Deslocamento na parte inferior da visualização principal.

cor

Cor do texto.

família de fontes

Nome da fonte.

font-size

Tamanho da fonte.

revestimento

Preenchimento em torno do texto da mensagem.

cor de fundo

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

raio da borda

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 de elementos da interface do usuário para obter mais informações.

Exemplo - para configurar uma mensagem de ponta semitransparente com fonte Arial branca de 12 px, 50 pixels de deslocamento a partir da parte inferior da visualizaçã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