The main view consists of the static image and the zoomed image shown in the flyout view. It also consists of the highlight navigation area that is displayed over the static image, and the tip message shown on top of the static image.
If the dimensions of the image being viewed do not match the dimensions of the flyout zoom view, the image content is centered within the flyout zoom view’s rectangle display area.
CSS properties of the main view
The appearance of the main view is controlled with the following CSS class selector:
.s7flyoutviewer .s7flyoutzoomview
CSS property |
Description |
---|---|
background-color |
The background color of the main view. |
Example - to make the main view transparent:
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
CSS properties of the flyout view
The appearance of the flyout view is controlled with the following CSS class selector:
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
CSS property |
Description |
---|---|
left |
The horizontal position of the flyout view, relative to top-left corner of main view. |
top |
The vertical position of the flyout view, relative to top-left corner of main view. |
width |
The width of the flyout view. |
height |
The height of the flyout view. |
border |
The border of the flyout view. |
Example - to set up a flyout view to 600 x 400 pixels, appearing with 100 pixels offset to the right of the 512 x 288 main view shown in the previous example:
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
left: 612px;
top: 0px;
width: 600px;
height: 400px;
}
CSS properties of the highlight in the main view
The appearance of the highlight in the main view is controlled with the following CSS class selector:
.s7flyoutviewer .s7flyoutzoomview .s7highlight
It is possible to control background, border, transparency, and similar attributes using CSS. However, the size and position of highlight DOM element is managed by the viewer logic. Overriding it through CSS is not supported.
CSS property |
Description |
---|---|
background-color |
The color of the highlight. |
opacity |
Highlight opacity. For Internet Explorer 8, use filter:alpha(opacity-…) ); |
border |
The border highlight. |
Example - to set up green highlight with 40% transparency and a one pixel red border:
.s7flyoutviewer .s7flyoutzoomview .s7highlight {
background-color: green;
opacity: 0.4;
filter: alpha(opacity = 40);
border: 1px solid red;
}
CSS properties of the cursor
When highlightmode
parameter is set to cursor
, highlight are in the main view is replaced with fixed-size cursor artwork, which is controlled with the CSS class selector:
.s7flyoutviewer .s7flyoutzoomview
.s7cursor
It is possible to control the background image and size using CSS.
Applicable CSS properties include:
CSS property |
Description |
---|---|
background-image |
Cursor artwork. |
width |
Cursor width. |
height |
Cursor height. |
Cursor supports the input
attribute selector, which can be used to apply different cursor artwork and size for different devices. In particular, input="mouse"
corresponds to the desktop systems and input="touch"
corresponds to the touch devices.
CSS properties of the overlay
When the overlay
parameter is set to 1
, the area around the highlight frame or the cursor image is controlled with the CSS class selector:
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS property |
Description |
---|---|
background-color |
Overlay color. |
opacity |
Overlay opacity. |
CSS properties of the tip message
The appearance of the tip message is controlled with the following CSS class selector:
.s7flyoutviewer .s7flyoutzoomview .s7tip
It is possible to configure font style, size, appearance, and vertical offset through CSS. However, horizontal alignment is managed by the viewer logic. Overriding it through CSS using left
or right
properties is not supported.
CSS property |
Description |
---|---|
bottom |
Offset from the bottom of the main view. |
color |
Text color. |
font-family |
Font name. |
font-size |
Font size. |
padding |
Padding around the message text. |
background-color |
Background fill color of message text. |
border-radius |
Background border radius of message text. |
opacity |
Background opacity of message text. For Internet Explorer 8, use filter:alpha(opacity-…) ) |
The tip message can be localized. See Localization of user interface elements for more information.
Example - to set up semi-transparent tip message with white Arial® 12-px font, 50 pixels offset from the bottom of the main view, padding, and a rounded border:
.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}