Zoomweergave flyout flyout-zoom-view

De hoofdweergave bestaat uit de statische afbeelding en de ingezoomde afbeelding die in de vervolgweergave worden weergegeven. Het bestaat ook uit het hooglichtnavigatiegebied dat boven de statische afbeelding wordt weergegeven en het uiteindebericht dat boven op de statische afbeelding wordt weergegeven.

Als de afmetingen van de afbeelding die wordt weergegeven niet overeenkomen met de afmetingen van de zoomweergave voor uitvouwen, wordt de afbeeldingsinhoud gecentreerd in het weergavegebied van de rechthoek van de zoomweergave.

CSS eigenschappen van de belangrijkste mening

De vormgeving van de hoofdweergave wordt bepaald door de volgende CSS-klassenkiezer:

.s7flyoutviewer .s7flyoutzoomview

Voorbeeld - de hoofdweergave transparant maken:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

CSS eigenschappen van de flyout mening

De weergave van de flyout-weergave wordt bepaald door de volgende CSS-klassenkiezer:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Voorbeeld - voor het instellen van een uitvliegweergave op 600 x 400 pixels, weergegeven met 100 pixels die rechts van de hoofdweergave van 512 x 288 staan, zoals getoond in het vorige voorbeeld:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

CSS eigenschappen van het hoogtepunt in de belangrijkste mening

De vormgeving van de markering in de hoofdweergave wordt bepaald door de volgende CSS-klassenkiezer:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

Het is mogelijk om achtergrond, grens, transparantie, en gelijkaardige attributen te controleren gebruikend CSS. De grootte en positie van het DOM-element voor markeren wordt echter beheerd door de viewerlogica. Overschrijven via CSS wordt niet ondersteund.

Voorbeeld: groen markeren instellen met een transparantie van 40% en een rode rand van 1 pixel:

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

CSS eigenschappen van de curseur

Wanneer de parameter highlightmode is ingesteld op cursor , worden de hooglichten in de hoofdweergave vervangen door cursorillustraties met een vaste grootte, die worden beheerd met de CSS-klassenkiezer:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

U kunt de achtergrondafbeelding en -grootte bepalen met CSS.

Toepasselijke CSS-eigenschappen zijn onder andere:

CSS eigenschappen van de bekleding

Wanneer de parameter overlay op 1 is ingesteld, wordt het gebied rondom het markeringsframe of de cursorafbeelding beheerd met de CSS-klassenkiezer:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

CSS eigenschappen van het uiteindebericht

De vormgeving van het tip-bericht wordt bepaald door de volgende CSS-klassenkiezer:

.s7flyoutviewer .s7flyoutzoomview .s7tip

Het is mogelijk lettertypestijl, tekengrootte, weergave en verticale verschuiving te configureren via CSS. De horizontale uitlijning wordt echter beheerd door de viewerlogica. Het overschrijven ervan via CSS met behulp van left - of right -eigenschappen wordt niet ondersteund.

Het tip-bericht kan worden gelokaliseerd. Zie Localisatie van gebruikersinterfaceelementenvoor meer informatie.

Voorbeeld - voor het instellen van een half-transparant uiteindebericht met een wit lettertype van Arial® 12 pixels, verschuiving van 50 pixels van de onderkant van de hoofdweergave, opvulling en een afgeronde rand:

.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);
}