Pop-up do painel Informações info-panel-popup

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 rollover_key definida no Dynamic Media Classic e se o recurso do painel 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:

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

Propriedade CSS
Descrição
background-image
Plano de fundo de preenchimento do painel Informações.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

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

.s7ecatalogviewer .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.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Propriedade CSS
Descrição
left
Posição horizontal da caixa de diálogo do painel de informações dentro do 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.
largura
Largura da caixa de diálogo.
altura
Altura do diálogo.
margem esquerda
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.
background-color
Cor de fundo da caixa de diálogo.
border-radius
Raio da borda do diálogo.
box-shadow
Sombra de diálogo.

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

.s7ecatalogviewer .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:

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

Propriedade CSS
Descrição
top
Posição na borda superior da caixa de diálogo.
direita
Posição da borda direita da caixa de diálogo.
left
Posição da borda esquerda da caixa de diálogo.
bottom
Posição na borda inferior da caixa de diálogo.
largura
Largura do botão.
altura
Altura do botão.
background-image
A imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Esse botão oferece suporte ao state seletor de atributos, que você pode usar 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 Fechar da caixa de diálogo com 28 x 28 pixels e posicionado a 5 pixels da borda superior e direita da caixa de diálogo do painel de informações. Por fim, o exibe uma imagem diferente para cada um dos quatro estados de botão diferentes.

.s7ecatalogviewer .s7infopanelpopup .s7closebutton {
 width: 28px;
 height: 28px;
 top: 5px;
 right: 5px;
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="up"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="over"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="down"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="disabled"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8