Pop-up do painel Informações

O Pop-up do painel Informações é exibido no meio da área do visualizador quando um usuário ativa um mapa de imagem que tem uma propriedade rolover_key definida no Dynamic Media Classic e se o recurso do painel de informações está configurado corretamente para o visualizador.

O plano de fundo do painel Informações cobre toda a área do visualizador e é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

Propriedade CSS

Descrição

imagem de fundo

Preenchimento de plano de fundo do painel Informações.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte também Sprites CSS .

Exemplo - Configure o pop-up do painel de informações para usar um plano de fundo preto semitransparente.

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay {
 background-color : rgba(0,0,0,0.75);
}

A caixa de diálogo do painel de informações é exibida por padrão no meio da área do visualizador. No entanto, é possível controlar seu tamanho, alinhamento, plano de fundo e borda com o seletor de classe CSS.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

Propriedade CSS

Descrição

left

Posição horizontal da caixa de diálogo do painel de informações no preenchimento do plano de fundo do painel da área do visualizador.

top

Posição vertical da caixa de diálogo do painel de informações na área do visualizador.

width

Largura da caixa de diálogo.

altura

Altura da caixa de diálogo.

margem esquerda

A margem esquerda da caixa de diálogo do painel de informações pode ser usada para fins de centralização.

margem superior

A margem superior da caixa de diálogo do painel de informações pode ser usada para fins de centralização.

preenchimento

Preenchimento da caixa de diálogo interna.

cor do fundo

Cor do plano de fundo da caixa de diálogo.

border-radius

Raio da borda da caixa de diálogo.

sombra de caixa

Sombra da caixa de diálogo.

Exemplo - configure a caixa de diálogo do painel de informações de 300 x 200 pixels centralizada na área do visualizador; tem 40 pixels de preenchimento na parte superior e 10 pixels de preenchimento em todos os outros lados, um plano de fundo cinza claro e um raio de borda de 10 pixels e sombra de queda.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay {
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -100px;
 width: 300px;
 height: 200px;
 padding-top: 40px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 background-color:rgb(221,221,221);
 border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.25);
}

A caixa de diálogo Painel de informações tem um botão Fechar e clicar ou tocar no botão fecha a caixa de diálogo.

A aparência desse botão é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton

Propriedade CSS

Descrição

top

Posição a partir da borda superior da caixa de diálogo.

right

Posição a partir da borda direita da caixa de diálogo.

left

Posição da borda esquerda da caixa de diálogo.

bottom

Posição a partir da borda inferior da caixa de diálogo.

largura

Largura do botão.

altura

Altura do botão.

imagem de fundo

A imagem exibida para um determinado estado de botão.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte também Sprites CSS .

OBSERVAÇÃO

Esse botão suporta state seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um botão de fechamento da caixa de diálogo com 28 x 28 pixels, 5 pixels posicionados da borda superior e direita da caixa de diálogo do painel de informações e exibir uma imagem diferente para cada um dos quatro estados de botão diferentes.

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton {
 width: 28px;
 height: 28px;
 top: 5px;
 right: 5px;
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="up"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="over"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="down"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="disabled"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}

Nesta página