Zurücksetzen-Schaltfläche für Zoom
Erstellt für:
- Entwickler
- Benutzende
Durch Klicken auf diese Schaltfläche wird ein Bild in der Hauptansicht zurückgesetzt. Sie können diese Schaltfläche mithilfe von CSS skalieren, anpassen und positionieren.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7basiczoomviewer .s7zoomresetbutton
| CSS-Eigenschaft | Beschreibung |
|---|---|
| Top- | Position ab dem oberen Rahmen, einschließlich Auffüllung. |
| rechte | Position vom rechten Rand aus, einschließlich Abstand. |
| linker | Position vom linken Rand aus, einschließlich Auffüllung. |
| untere | Position ab dem unteren Rand, einschließlich Abstand. |
| 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 von CSS-Sprites. |
HINWEISstate-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: So richten Sie eine Zurücksetzen-Schaltfläche für den Zoom ein, die 32 x 32 Pixel groß ist und sechs Pixel vom oberen und rechten Rand des Viewers entfernt positioniert ist. Es muss für jeden der vier verschiedenen Schaltflächenzustände ein anderes Bild angezeigt werden.
.s7basiczoomviewer .s7zoomresetbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7basiczoomviewer .s7zoomresetbutton [state='up'] {
background-image:url(images/v2/ZoomResetButton_dark_up.png);
}
.s7basiczoomviewer .s7zoomresetbutton [state='over'] {
background-image:url(images/v2/ZoomResettButton_dark_over.png);
}
.s7basiczoomviewer .s7zoomresetbutton [state='down'] {
background-image:url(images/v2/ZoomResetButton_dark_down.png);
}
.s7basiczoomviewer .s7zoomresetbutton [state='disabled'] {
background-image:url(images/v2/ZoomResetButton_dark_disabled.png);
}