full-screen button

Causes the viewer to enter or exit full-screen mode when selected by the user. This button appears in the main control bar. This button is not displayed if the viewer works in pop-up mode and the system does not support native full-screen. You can size, skin, and positioned the button by CSS.

CSS properties of the main viewer area

The appearance of the button is controlled with the following CSS class selector:

.s7ecatalogviewer .s7fullscreenbutton

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - To set up a full-screen button that is 28 x 28 pixels and is positioned 4 pixels from the bottom and 5 pixels from the right edge of the main control bar. And finally, displays a different image for each of the four different button states when selected or not selected.

.s7ecatalogviewer .s7fullscreenbutton {
bottom:4px;
right:5px;
width:28px;
height:28px;
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}