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
CSS-egenskap
Beskrivning
background-color
Huvudvyns bakgrundsfärg.

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
CSS-egenskap
Beskrivning
vänster
Den utfällbara vyns vågräta position i förhållande till huvudvyns övre vänstra hörn.
top
Den utfällbara vyns lodräta position i förhållande till huvudvyns övre vänstra hörn.
width
Bredden på den utfällbara vyn.
height
Höjden på den utfällbara vyn.
border
Den utfällbara vyns kantlinje.

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.

CSS-egenskap
Beskrivning
background-color
Färgen på högdagern.
opacitet

Högdageropacitet.

För Internet Explorer 8, använd filter:alpha(opacity-...) );

border
Kantmarkeringen.

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 highlightmode parametern är inställd på cursor, markeringen i huvudvyn ersätts 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-egenskap
Beskrivning
background-image
Markörgrafik.
width
Markörbredd.
height
Markörhöjd.
NOTE
Markören har stöd för input attributväljare, som kan användas för att använda olika markörteckningar och storlekar för olika enheter. I synnerhet input="mouse" motsvarar datorsystemen och input="touch" motsvarar touchenheterna.

CSS-egenskaper för övertäckningen

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

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS-egenskap
Beskrivning
background-color
Övertäckningsfärg.
opacitet
Övertäckningsopacitet.

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. Åsidosätta den via CSS med left eller right egenskaper stöds inte.

CSS-egenskap
Beskrivning
nederkant
Förskjutning längst ned i huvudvyn.
färg
Textfärg.
font-family
Teckensnittsnamn.
font-size
Teckenstorlek.
utfyllnad
Utfyllnad runt meddelandetexten.
background-color
Bakgrundsfyllningsfärg för meddelandetext.
border-radius
Meddelandetextens kantradie i bakgrunden.
opacitet

Meddelandetextens bakgrundsopacitet.

För Internet Explorer 8, använd filter:alpha(opacity-..) )

Tipsmeddelandet kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.

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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8