Ventana emergente del panel Información

La ventana emergente del panel de información se muestra en medio 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á correctamente configurada 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

CSS, propiedad

Descripción

background-image

Relleno de fondo del panel de información.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

Ejemplo: configure la ventana emergente del panel de información para utilizar 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

CSS, propiedad

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

Ancho del cuadro de diálogo.

height

Altura del cuadro de diálogo.

margin-left

El margen izquierdo del cuadro de diálogo del panel de información se puede utilizar para centrar.

margin-top

El margen superior del cuadro de diálogo del panel de información se puede utilizar con fines centrados.

relleno

Relleno de cuadro de diálogo interno.

background-color

Color de fondo del cuadro de diálogo.

border-radius

Radio del borde del cuadro de diálogo.

box-Shadow

Sombra del cuadro de diálogo.

Ejemplo: configure un cuadro de diálogo del panel de información de 300 x 200 píxeles que esté centrado en el área del visor; tiene 40 píxeles de relleno en la parte superior y 10 píxeles de relleno en todos los demás lados, un fondo gris claro, 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 del panel de información tiene un botón de cierre y al tocar 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

CSS, propiedad

Descripción

parte superior

Posición desde el borde superior del cuadro de diálogo.

derecha

Posición desde el borde derecho del cuadro de diálogo.

izquierda

Posición desde el borde izquierdo del cuadro de diálogo.

parte inferior

Posición desde el borde inferior del cuadro de 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

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

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

La información de 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, situado 5 píxeles desde el borde 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); 
}

En esta página