Effet de zone cliquable image-map-effect
Selon la valeur du paramètre de mode, la visionneuse affiche les icônes de zone cliquable sur la vue principale à des endroits où les zones cliquables sont créées à l’origine dans Dynamic Media Classic. Ou, il effectue le rendu des régions exactes qui correspondent à la forme des zones cliquables d’origine.
Propriétés CSS de la zone de visionneuse principale
L’aspect de l’icône de zone cliquable est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7imagemapeffect .s7icon
s7mapoverlay
utilisée par le passé pour mettre en forme les icônes de zone cliquable est désormais obsolète. Utilisez s7icon
à la place.Position dans l’objet d’illustration, si des sprites CSS sont utilisés.
Voir aussi Sprites CSS.
state
, que vous pouvez utiliser pour appliquer différents habillages aux états d’icônes de default
et active
.Exemple : configurez une icône de zone cliquable de 28 x 28 pixels qui affiche une image différente pour chacun des deux états d’icône différents.
.s7ecatalogviewer .s7imagemapeffect .s7icon {
height: 28px;
width: 28px;
background-image: url(images/v2/ImageMapEffect_dark_up.png);
}
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="default"] {
opacity: 0.5;
}
.s7ecatalogviewer .s7imagemapeffect .s7icon[state="active"] {
opacity: 1;
}
Voir aussi Prise en charge des zones cliquables.
L’aspect de la zone cliquable est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7imagemapeffect .s7region
Couleur de remplissage de la zone cliquable.
Spécifié au format #RRGGBB, RGB(R,G,B) ou RGBA(R,G,B,A).
Couleur de remplissage de la zone cliquable.
Spécifié au format #RRGGBB, RGB(R,G,B) ou RGBA(R,G,B,A).
Style de bordure de la zone cliquable.
Spécifié en tant que width solid color , 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 de 1
pixels :
.s7ecatalogviewer .s7imagemapeffect .s7region {
border: 1px solid #000000;
background: RGBA(0,0,0,0);
}