Hotspots und Imagemaps

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

Breite des Hotspot-Symbols.

height

Höhe des Hotspot-Symbols.

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 #RGGBB , 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 #RGGBB , RGB(R,G,B) oder RGBA(R,G,B,A) an.

rand

Randstil der Imagemap Sollte als " width solid color "angegeben werden, wobei width in Pixel ausgedrückt wird und Farbe als #RGGBB , RGB(R,G,B) <a1 1/> oder RGBA(R,G,B,A) .

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

Auf dieser Seite