Der Zoomindikator wird über dem Hauptbereich der Ansicht angezeigt. Es wird angezeigt, wenn sich das Bild im Reset-Zustand befindet und es auch vom iconeffect-Parameter abhängt.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild des Anzeigebereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7zoomviewer .s7zoomview .s7iconeffect
CSS-Eigenschaft |
Beschreibung |
---|---|
background-image |
Bildmaterial für Zoomindikatoren |
background-position |
Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
width |
Breite des Zoomindikators. |
height |
Höhe des Zoomindikators. |
Der Symboleffekt unterstützt die Attributauswahl media-type
, mit der Sie verschiedene Symboleffekte auf verschiedene Geräte anwenden können. Insbesondere entspricht media-type='standard'
Desktop-Systemen, bei denen die Mauseingabe normalerweise verwendet wird, und media-type='multitouch'
Geräten mit Berührungseingabe.
Beispiel: So richten Sie einen Zoomindikator mit 100 x 100 Pixel ein, der für Desktop-Systeme und Touch-Geräte unterschiedliche Grafiken enthält.
.s7zoomviewer .s7zoomview .s7iconeffect {
width: 100px;
height: 100px;
}
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='standard'] {
background-image:url(images/v2/IconEffect_zoom.png);
}
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='multitouch'] {
background-image:url(images/v2/IconEffect_pinch.png);
}