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. Também consiste na área de navegação de realce exibida sobre a imagem estática e na mensagem de dica mostrada na parte superior da imagem estática.

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

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 exibição da imagem suspensa

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

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
Propriedade CSS
Descrição
left
A posição horizontal da exibição da imagem suspensa, relativa ao canto superior esquerdo da exibição principal.
top
A posição vertical da exibição da imagem suspensa, relativa ao canto superior esquerdo da exibição principal.
largura
A largura da exibição da imagem suspensa.
altura
A altura da exibição da imagem suspensa.
borda
A borda da exibição da imagem suspensa.

Exemplo - para configurar uma exibição de imagem suspensa para 600 x 400 pixels, aparecendo com 100 pixels deslocados à 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 destaque 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 a substituição por meio do CSS.

Propriedade CSS
Descrição
background-color
A cor do destaque.
opacidade

Realçar opacidade.

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

borda
O destaque da borda.

Exemplo - para configurar um 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 CSS do cursor

Quando highlightmode está definido como cursor, os realces estão na exibição principal e são substituídos por um trabalho artístico de cursor de tamanho fixo, que é controlado com o seletor de classe CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

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

As propriedades de CSS aplicáveis incluem:

Propriedade CSS
Descrição
background-image
Trabalho artístico de cursor.
largura
Largura do cursor.
altura
Altura do cursor.
NOTE
O cursor suporta o input seletor de atributo, que pode ser usado para aplicar arte-final e tamanho de cursor diferentes para dispositivos diferentes. Em especial, input="mouse" corresponde aos sistemas de desktop e input="touch" corresponde aos dispositivos de toque.

Propriedades CSS da sobreposição

Quando a variável overlay está definido como 1, a área ao redor do quadro de realce ou da imagem do cursor é controlada com o seletor de classe CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay
Propriedade CSS
Descrição
background-color
Cor de 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, 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8