Zones réactives et zones cliquables

La visionneuse affiche des icônes de zone réactive au-dessus de la vue principale dans les endroits où des zones réactives ont été créées à l’origine dans Dynamic Media d’AEM Assets - on Demand.

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

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

.s7carouselviewer .s7imagemapeffect .s7icon

propriété CSS

Description

background-image

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

arrière-plan-position

Positionnez-vous à l’intérieur du sprite de l’illustration, si les sprites CSS sont utilisés.

Voir sprites CSS .

width

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

height

Hauteur de l’icône des zones réactives.

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 cliquable

L’aspect de la zone cliquable est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7carouselviewer .s7imagemapeffect .s7region

propriété CSS

Description

background

Couleur de remplissage de la zone cliquable.

Définissez cette couleur dans les formats #RRGGBB , RVB(R,G,B) ou RGBA(R,G,B,A) .

arrière-plan-couleur

Couleur de remplissage de la zone cliquable.

Définissez cette couleur dans les formats #RRGGBB , RVB(R,G,B) ou RGBA(R,G,B,A) .

bordure

Style de bordure de la zone cliquable. Doit être spécifié sous la forme " width color solide ", où width est exprimé en pixels, et color est défini sur #RRGGBB , RGB(R,G,B) , ou RGBA(R,G,B,A) .

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

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

Sur cette page