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

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

CSS-eigenschappen van het hoofdviewergebied

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

.s7carouselviewer .s7imagemapeffect .s7icon
CSS-eigenschap
Beschrijving
achtergrondafbeelding
Hotspot-pictogramafbeeldingen.
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 afbeeldingskaartgebied

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.

Deze kleur opgeven in #RRGGBB , RGB(R,G,B) , of RGBA(R,G,B,A) indelingen.

background-color

Vulkleur van gebied Afbeeldingskaart.

Deze kleur opgeven in #RRGGBB , RGB(R,G,B) , of RGBA(R,G,B,A) indelingen.

border
Randstijl van afbeeldingskaart. Moet worden gespecificeerd als " width effen kleur ", waarbij width wordt uitgedrukt in pixels, en kleur is 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