Hotspots en afbeeldingen met hyperlinks hotspots-and-image-maps

In de viewer worden hotspot-pictogrammen weergegeven op de hoofdweergave op plaatsen waar hotspots oorspronkelijk in Dynamic Media of AEM Assets waren ontworpen, op aanvraag.

CSS eigenschappen van het belangrijkste viewergebied

De weergave van het hotspot-pictogram wordt bepaald door de volgende CSS-klassenkiezer:

.s7carouselviewer .s7imagemapeffect .s7icon
CSS-eigenschap
Beschrijving
background-image
Hotspot-pictogramillustraties.
background-position

Plaats binnen de illustratie-sprite als CSS-sprites worden gebruikt.

Zie CSS-sprites.

width
Breedte van hotspot-pictogram.
height
Hoogte van hotspot-pictogram.

Voorbeeld - stel een hotspot-pictogram in van 56 x 56 pixels waarmee een andere afbeelding wordt weergegeven voor elk van de twee verschillende pictogramstatussen:

.s7interactiveimage .s7imagemapeffect .s7icon {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
 width: 56px;
 height: 56px;
}
.s7interactiveimage .s7imagemapeffect .s7icon:hover {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}

CSS eigenschappen van het gebied van de beeldkaart

De vormgeving van het gebied met afbeeldingskaart wordt bepaald door de volgende CSS-klassenkiezer:

.s7carouselviewer .s7imagemapeffect .s7region

CSS-eigenschap
Beschrijving
background

Vulkleur van gebied Afbeeldingskaart.

Geef deze kleur op in de indelingen #RRGGBB , RGB(R,G,B) of RGBA(R,G,B,A) .

background-color

Vulkleur van gebied Afbeeldingskaart.

Geef deze kleur op in de indelingen #RRGGBB , RGB(R,G,B) of RGBA(R,G,B,A) .

border
Randstijl van afbeeldingskaart. Moet worden opgegeven als " width solid color ", waarbij width wordt uitgedrukt in pixels en color wordt ingesteld als #RRGGBB , RGB(R,G,B) of RGBA(R,G,B,A) }.

Voorbeeld: een transparant gebied voor een afbeelding met hyperlinks instellen met een zwarte rand van één pixel:

.s7carouselviewer .s7imagemapeffect .s7region {
 border: 1px solid #000000;
 background: RGBA(0,0,0,0);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8