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