Effet de carte graphique image-map-effect
En fonction de la valeur du paramètre mode , la visionneuse affiche des icônes de zone cliquable sur la vue principale aux emplacements où les zones cliquables sont initialement créées dans Dynamic Media Classic. Il effectue également le rendu des zones 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é par le sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7imagemapeffect .s7icon
s7mapoverlay utilisée pour appliquer un style aux icônes de zone cliquable dans le passé est désormais obsolète ; utilisez plutôt s7icon .Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.
Voir aussi desSprites CSS.
state, que vous pouvez utiliser pour appliquer différents habillages aux états d’icône des default et des 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é par le sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7imagemapeffect .s7region
Couleur de remplissage de la zone cliquable.
Spécifiée au format #RRGGBB, RGB(R,G,B) ou RGBA(R,G,B,A).
Couleur de remplissage de la zone cliquable.
Spécifiée au format #RRGGBB, RGB(R,G,B) ou RGBA(R,G,B,A).
Style de bordure de la zone cliquable.
Spécifiée comme largeur couleur pleine , où largeur est exprimée en pixels et couleur est défini comme #RRGGBB, RGB(R,G,B) ou RGBA(R,G,B,A).
Exemple - Configurez une zone cliquable transparente avec 1 bordure noire en pixels :
.s7ecatalogviewer .s7imagemapeffect .s7region {
border: 1px solid #000000;
background: RGBA(0,0,0,0);
}