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

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

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.

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 o parâmetro highlightmode é definido como cursor, os realces estão na exibição principal 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:

Propriedades CSS da sobreposição

Quando o parâmetro overlay é 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

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.

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