Exibição de zoom de imagem suspensa

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

Propriedade CSS

Descrição

background-color

A cor do plano de fundo da janela principal.

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. Substituição por CSS usando left ou right não há suporte para propriedades.

Propriedade CSS

Descrição

bottom

Deslocamento da parte inferior da exibição principal.

cor

Cor do texto.

font-family

Nome da fonte.

font-size

Tamanho da fonte.

preenchimento

Preenchimento ao redor do texto da mensagem.

background-color

Cor de preenchimento do fundo do texto da mensagem.

border-radius

Raio da borda do fundo do texto da mensagem.

opacidade

Opacidade do plano de fundo do texto da mensagem.

Para o Internet Explorer 8, use filtro:alfa(opacidade-...) )

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

Nesta página