Durch Klicken oder Tippen auf diese Schaltfläche wird ein Bild in der Haupt-Ansicht zurückgesetzt. Mithilfe von CSS können Sie diese Schaltfläche vergrößern, verkleinern und positionieren.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7basiczoomviewer .s7zoomresetbutton
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Position vom oberen Rand, einschließlich Auffüllung. |
rechts |
Position vom rechten Rand, einschließlich Auffüllung. |
links |
Position vom linken Rand, einschließlich Auffüllung. |
unten |
Position vom unteren Rand, einschließlich Auffüllung. |
width |
Breite der Schaltfläche. |
height |
Höhe der Schaltfläche. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.
Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.
Beispiel: Um eine Zoom-Zurücksetzschaltfläche einzurichten, die 32 x 32 Pixel groß ist, sechs Pixel vom oberen und rechten Rand des Viewers entfernt und ein anderes Bild für jeden der vier verschiedenen Schaltflächenzustände anzeigt.
.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);
}