Hotspots und Imagemaps hotspots-and-image-maps

Der Viewer zeigt Hotspot-Symbole über der Hauptansicht an Orten an, an denen Hotspots ursprünglich in Dynamic Media von AEM Assets - On-Demand - erstellt wurden.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

Das Erscheinungsbild des Hotspot-Symbols wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7carouselviewer .s7imagemapeffect .s7icon
CSS-Eigenschaft
Beschreibung
background-image
Hotspot-Symbolgrafik.
background-position

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites.

width
Hotspot-Symbolbreite.
Höhe
Hotspot-Symbolhöhe.

Beispiel: Richten Sie ein Hotspot-Symbol mit 56 x 56 Pixel ein, das für jeden der beiden Symbolstatus ein anderes Bild anzeigt:

.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-Eigenschaften des Imagemap-Bereichs

Das Erscheinungsbild des Imagemap-Bereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7carouselviewer .s7imagemapeffect .s7region

CSS-Eigenschaft
Beschreibung
background

Füllfarbe für Imagemap-Bereich.

Geben Sie diese Farbe in den Formaten #RRGGBB , RGB(R,G,B) oder RGBA(R,G,B,A) an.

background-color

Füllfarbe für Imagemap-Bereich.

Geben Sie diese Farbe in den Formaten #RRGGBB , RGB(R,G,B) oder RGBA(R,G,B,A) an.

border
Randstil der Imagemap Sollte als " width solid color "angegeben werden, wobei width in Pixel angegeben wird und color als #RGGBB , RGB(R,G,B) oder RGBA(R,G,B,A) 3}.

Beispiel: Richten Sie einen transparenten Imagemap-Bereich mit einem schwarzen Rahmen von einem Pixel ein:

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