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
Coloque dentro del icono de ilustración si se utilizan iconos CSS.
Consulte también Sprites CSS.
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
Coloque dentro del icono de ilustración si se utilizan iconos CSS.
Consulte también Sprites CSS.
state, que puede utilizar para aplicar distintos aspectos a distintos estados de botón.La información del objeto del botón se puede localizar. Consulte Localización de 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);
}