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 .

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 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 o seletor de atributos state, 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); 
}