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:

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

Propiedad CSS
Descripción
background-image
Relleno de fondo del panel Información.
background-position

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.

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

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

Propiedad CSS
Descripción
izquierda
Posición horizontal del cuadro de diálogo del panel de información dentro del relleno de fondo del panel de área del visor.
parte superior
Posición vertical del cuadro de diálogo del panel de información dentro del área del visor.
width
Anchura del diálogo.
height
Altura del diálogo.
margin-left
El margen izquierdo del cuadro de diálogo del panel de información se puede utilizar para centrar.
margin-top
Margen superior del cuadro de diálogo del panel de información; se puede utilizar para centrar.
relleno
Relleno de diálogo interno.
background-color
Color de fondo del diálogo.
border-radius
Radio de borde de diálogo.
caja-sombra
Sombra de diálogo.

Ejemplo: configure el 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 y un radio de borde de 10 píxeles y una sombra paralela.

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

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:

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton

Propiedad CSS
Descripción
parte superior
Posición desde el borde superior del cuadro de diálogo.
derecha
Posición desde el borde derecho del diálogo.
izquierda
Posición desde el borde izquierdo del cuadro de diálogo.
parte inferior
Posición desde el borde inferior del diálogo.
width
Ancho del botón.
height
Altura del botón.
background-image
Imagen que se muestra para un estado de botón determinado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
Este botón admite el state selector de atributos, que puede utilizar para aplicar diferentes aspectos a distintos estados de botones.

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 botón de cierre de cuadro de diálogo de 28 x 28 píxeles, colocado a 5 píxeles de los bordes superior y derecho del cuadro de diálogo del panel de información y muestra una imagen diferente para cada uno de los cuatro estados de botón 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8