Bouton de rotation à gauche spin-left-button
Le fait de cliquer ou d’appuyer sur ce bouton fait tourner l’image vers la gauche dans la vue principale. Ce bouton n’est pas affiché sur les téléphones mobiles afin d’économiser l’espace de l’écran. En outre, le bouton est masqué lorsqu’une visionneuse à 360° multidimensionnelle est utilisée. Vous pouvez redimensionner, habiller et positionner le bouton à l’aide de CSS.
Propriétés CSS des boutons de rotation
Le bouton est ajouté à un conteneur interne contrôlé par DIV avec le sélecteur de classe CSS :
.s7spinviewer .s7spinbuttons
L’apparence de ce bouton à l’intérieur du conteneur est contrôlée par le sélecteur de classe CSS :
.s7spinviewer .s7spinbuttons .s7panleftbutton
Position à l’intérieur du sprite de l’illustration, si des sprites CSS sont utilisés.
Voir SpritesCSS.
state , qui peut être utilisé pour appliquer différents habillages à différents états de bouton.L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.
Exemple - Pour configurer un bouton de rotation à gauche de 28 x 28 pixels et placé sur le bord gauche du conteneur intérieur. Enfin, affiche une image différente pour chacun des quatre états différents du bouton :
.s7spinviewer .s7spinbuttons .s7panleftbutton {
position:absolute;
left: 0px;
width:28px;
height:28px;
background-size:contain;
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='up'] {
background-image:url(images/v2/SpinLeftButton_light_up.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='over'] {
background-image:url(images/v2/SpinLeftButton_light_over.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='down'] {
background-image:url(images/v2/SpinLeftButton_light_down.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='disabled'] {
background-image:url(images/v2/SpinLeftButton_light_disabled.png);
}