Utfällbar zoomvy flyout-zoom-view

Huvudvyn består av den statiska bilden och den zoomade bilden som visas i den utfällbara vyn. Det består också av markeringsnavigeringsområdet som visas över den statiska bilden, och tipsmeddelandet som visas ovanpå den statiska bilden.

Om dimensionerna för den bild som visas inte matchar dimensionerna för den utfällbara zoomvyn centreras bildinnehållet i den utfällbara zoomvyns rektangulära visningsområde.

CSS-egenskaper för huvudvyn

Utseendet på huvudvyn styrs med följande CSS-klassväljare:

.s7flyoutviewer .s7flyoutzoomview

Exempel - för att göra huvudvyn genomskinlig:

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

CSS-egenskaper för den utfällbara vyn

Utseendet på den utfällbara vyn styrs av följande CSS-klassväljare:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Exempel - om du vill ställa in en utfällbar vy till 600 x 400 pixlar, som visas med 100 pixlar förskjuten till höger om huvudvyn 512 x 288 som visas i föregående exempel:

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

CSS-egenskaper för högdagern i huvudvyn

Utseendet på högdagern i huvudvyn styrs av följande CSS-klassväljare:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

Det går att styra attribut för bakgrund, kant, genomskinlighet och liknande med hjälp av CSS. Storleken och positionen för DOM-elementet för högdager hanteras emellertid av visningslogiken. Det går inte att åsidosätta den via CSS.

Exempel - för att ställa in grön högdager med 40 % genomskinlighet och en röd kant på en pixel:

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

CSS-egenskaper för markören

När parametern highlightmode är inställd på cursor ersätts markeringen i huvudvyn med en markörteckning med fast storlek, som styrs av CSS-klassväljaren:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

Det går att styra bakgrundsbilden och storleken med CSS.

Tillämpliga CSS-egenskaper är:

CSS-egenskaper för övertäckningen

När parametern overlay är inställd på 1 styrs området runt markeringsramen eller markörbilden med CSS-klassväljaren:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

CSS-egenskaper för tipsmeddelandet

Utseendet på tipsmeddelandet styrs av följande CSS-klassväljare:

.s7flyoutviewer .s7flyoutzoomview .s7tip

Det går att konfigurera teckensnittsstil, storlek, utseende och lodrät förskjutning via CSS. Den vågräta justeringen hanteras emellertid av visningsprogrammets logik. Det går inte att åsidosätta den via CSS med egenskaperna left eller right.

Tipsmeddelandet kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in ett halvgenomskinligt tips med vitt Arial® 12-px-teckensnitt, förskjuts 50 pixlar från huvudvyns nederkant, utfyllnad och en rundad kant:

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