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 hoofdweergave

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

.s7flyoutviewer .s7flyoutzoomview

Voorbeeld - om de hoofdweergave transparant te maken:

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

CSS-eigenschappen van de vervolgweergave

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 de markering in de hoofdweergave

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 cursor

Wanneer highlightmode parameter is ingesteld op cursormarkeren bevindt zich in de hoofdweergave en wordt 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 overlay

Wanneer de overlay parameter is ingesteld op 1Het gebied rond het markeringskader of de cursorafbeelding wordt beheerd met de CSS-klassenkiezer:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

CSS-eigenschappen van het tip-bericht

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. Overschrijven met CSS left of right eigenschappen worden niet ondersteund.

Het tip-bericht kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor 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);
}