Info-Bedienfeld-Popup
Erstellt für:
- Entwickler
- Benutzende
Das Popup des Informationsbereichs wird in der Mitte des Viewer-Bereichs angezeigt, wenn Benutzende eine Imagemap aktivieren, für die in Dynamic Media Classic die Eigenschaft „rollover_key“ definiert ist, und wenn die Funktion des Informationsbereichs für den Viewer ordnungsgemäß konfiguriert ist.
Der Hintergrund des Infobedienfelds deckt den gesamten Viewer-Bereich ab und wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogviewer .s7infopanelpopup .s7backoverlay
| CSS-Eigenschaft | Beschreibung |
|---|---|
| Hintergrundbild- | Füllhintergrund des Infobedienfelds. |
| Hintergrundposition |
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden. Siehe auch CSS Sprites-. |
Beispiel: Richten Sie das Infobedienfeld-Popup so ein, dass ein halbtransparenter schwarzer Hintergrund verwendet wird.
.s7ecatalogviewer .s7infopanelpopup .s7backoverlay {
background-color : rgba(0,0,0,0.75);
}
Das Dialogfeld „Infobereich“ wird standardmäßig in der Mitte des Viewer-Bereichs angezeigt. Sie können jedoch ihre Größe, Ausrichtung, den Hintergrund und den Rahmen mit dem CSS-Klassenselektor steuern.
.s7ecatalogviewer .s7infopanelpopup .s7overlay
| CSS-Eigenschaft | Beschreibung |
|---|---|
| linker | Horizontale Position des Dialogfelds „Informationsbereich“ im Hintergrundfüllbereich des Viewer-Bereichs. |
| Top- | Vertikale Position des Dialogfelds „Informationsbereich“ im Viewer-Bereich. |
| Breite | Dialogfeldbreite. |
| Höhe | Höhe des Dialogfelds. |
| Rand links | Der linke Rand des Dialogfelds „Informationsbereich“ kann zum Zentrieren verwendet werden. |
| - | Oberer Rand des Dialogfelds „Informationsbereich“, kann zum Zentrieren verwendet werden. |
| - | Auffüllung des internen Dialogfelds. |
| - | Hintergrundfarbe des Dialogfelds. |
| - | Dialog-Rahmenradius. |
| - | Schatten des Dialogfelds. |
Beispiel : Zum Einrichten des Dialogfelds „Informationsbereich“ mit 300 x 200 Pixeln, das im Viewer-Bereich zentriert ist. Er hat oben einen Abstand von 40 Pixeln und auf allen anderen Seiten einen Abstand von 10 Pixeln, einen hellgrauen Hintergrund und einen Rahmenradius von 10 Pixeln und einen Schlagschatten.
.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);
}
Das Dialogfeld „Infobereich“ verfügt über eine Schaltfläche zum Schließen, und durch Klicken oder Tippen auf die Schaltfläche wird das Dialogfeld geschlossen.
Das Erscheinungsbild dieser Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7ecatalogviewer .s7infopanelpopup .s7closebutton
| CSS-Eigenschaft | Beschreibung |
|---|---|
| Top- | Position am oberen Rand des Dialogfelds. |
| rechte | Position am rechten Rand des Dialogfelds. |
| linker | Position am linken Rand des Dialogfelds. |
| untere | Position am unteren Rand des Dialogfelds. |
| Breite | Breite der Schaltfläche. |
| Höhe | Höhe der Schaltfläche. |
| Hintergrundbild- | Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
| Hintergrundposition |
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden. Siehe auch CSS Sprites-. |
NOTEstate Attributauswahl, mit der Sie verschiedene Skins auf verschiedene Schaltflächenzustände anwenden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel : Zum Einrichten eines Dialogfelds wird die Schaltfläche Schließen angezeigt, die 28 x 28 Pixel groß ist und 5 Pixel vom oberen und rechten Rand des Dialogfelds „Informationsbereich“ entfernt positioniert ist. Schließlich zeigt für jeden der vier verschiedenen Schaltflächenzustände ein eigenes Bild an.
.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);
}