Hotspots und Imagemaps

Der Viewer zeigt Hotspot-Symbole über der wichtigsten Ansicht an Orten an, an denen Hotspots ursprünglich in Dynamic Media von AEM Assets - On-Demand - verfasst 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 Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

width

Hotspot-Symbolbreite.

height

Höhe des Hotspot-Symbols.

Beispiel: Richten Sie ein Hotspot-Symbol mit 56 x 56 Pixel ein, das für jeden der beiden verschiedenen 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 des Imagemap-Bereichs.

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

background-color

Füllfarbe des Imagemap-Bereichs.

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

rand

Randstil für Imagemap-Bereiche. Sollte als " width solid color "angegeben werden, wobei width in Pixel und color als #RGGBB , RGB(R,G,B) 1/> oder RGBA(R,G,B,A) .

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

.s7carouselviewer .s7imagemapeffect .s7region { 
 border: 1px solid #000000; 
 background: RGBA(0,0,0,0);  
}

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now