Zones réactives et zones cliquables

Le lecteur affiche des icônes de zones réactives sur la vue principale dans les endroits où des zones réactives ont été créées à l’origine dans Dynamic Media of AEM Assets - à la demande.

Propriétés CSS de la zone de visualisation principale

L’aspect de l’icône de zone réactive est contrôlé par le sélecteur de classe CSS suivant :

.s7carouselviewer .s7imagemapeffect .s7icon

Propriété CSS

Description

image d’arrière-plan

Image d’icône de zone réactive.

arrière-plan-position

Positionnez l’objet d’illustration à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés.

Voir sprites CSS .

width

Largeur de l’icône de zone réactive.

height

Hauteur de l’icône de zone réactive.

Exemple : configurez une icône de zone réactive de 56 x 56 pixels qui affiche une image différente pour chacun des deux états d’icône différents :

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

Propriétés CSS de la zone de zone cliquable

L’aspect de la région de zone cliquable est contrôlé par le sélecteur de classe CSS suivant :

.s7carouselviewer .s7imagemapeffect .s7region

Propriété CSS

Description

arrière

Couleur de remplissage de la zone de zone cliquable.

Spécifiez cette couleur aux formats #RRGBB , RGB(R, G, B) ou RGBA(R, G, B, A) .

arrière-plan-couleur

Couleur de remplissage de la zone de zone cliquable.

Spécifiez cette couleur aux formats #RRGBB , RGB(R, G, B) ou RGBA(R, G, B, A) .

bordure

Style de bordure de la zone de zone de zone cliquable. Doit être spécifié comme " width solid color ", où width est exprimé en pixels et color est défini comme #RRGBB , RGB(R, G, B) <a1 1/> ou RGBA(R, G, B, A) .

Exemple : configurez une zone transparente de zone cliquable avec une bordure noire d’un pixel :

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

Sur cette page

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