Exibição de zoom de imagem suspensa flyout-zoom-view
A visualização principal consiste na imagem estática e na imagem com zoom mostrada na visualização da imagem suspensa na parte superior da imagem estática. Também consiste na mensagem de dica mostrada sobre a imagem estática.
Propriedades CSS da exibição principal
A aparência da visualização principal é controlada com o seguinte seletor de classe CSS:
.s7flyoutviewer .s7flyoutzoomview
Exemplo - para tornar a exibição principal transparente:
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
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, o tamanho, a aparência e o deslocamento vertical por meio do CSS. No entanto, o alinhamento horizontal é gerenciado pela lógica do visualizador. Não há suporte para a substituição por CSS usando as propriedades left ou right.
Opacidade do plano de fundo do texto da mensagem.
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 dica semitransparente com fonte Arial® de 12 px branca, deslocamento de 50 pixels 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);
}