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