Flyout zoom view

The main view consists of the static image, the zoomed image shown in the flyout view, the highlight navigation area displayed over the static image and the tip message shown on top of 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.

NOTE

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 12px 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); 
}

On this page