Ventana emergente del panel Información info-panel-popup

La ventana emergente del panel de información se muestra en el centro del área del visor cuando un usuario activa un mapa de imagen que tiene una propiedad rollover_key definida en Dynamic Media Classic y si la función del panel de información está configurada correctamente para el visor.

El fondo del panel de información cubre toda el área del visor y se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

Ejemplo: configure la ventana emergente del panel de información para que utilice un fondo negro semitransparente.

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

El cuadro de diálogo del panel de información se muestra de forma predeterminada en medio del área del visor. Sin embargo, es posible controlar su tamaño, alineación, fondo y borde con el selector de clases CSS.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Ejemplo: Configuración del cuadro de diálogo del panel de información de 300 x 200 píxeles centrado en el área del visor. Tiene un relleno de 40 píxeles en la parte superior y de 10 píxeles en todos los demás lados, un fondo gris claro, un radio de borde de 10 píxeles y una sombra paralela.

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

El cuadro de diálogo Panel de información tiene un botón Cerrar y al pulsar o hacer clic en el botón se cierra el cuadro de diálogo.

El aspecto de este botón se controla con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

La información del objeto del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar un cuadro de diálogo Cerrar botón de 28 x 28 píxeles y situado a 5 píxeles del borde superior y derecho del cuadro de diálogo del panel de información. Y, finalmente, muestra una imagen diferente para cada uno de los cuatro estados de botón 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);
}