Partage social social-share

Par défaut, l’outil de partage sur les réseaux sociaux s’affiche dans le coin supérieur droit. Il se compose d’un bouton et d’un panneau qui se développe lorsque l’utilisateur clique ou appuie sur un bouton et qui contient des outils de partage individuels.

La position et la taille de l’outil de partage sur les réseaux sociaux dans l’interface utilisateur de la visionneuse sont contrôlées par les éléments suivants :

.s7interactivevideoviewer .s7socialshare

Propriétés CSS de l’outil de partage sur les réseaux sociaux

top
Position verticale de l’outil de partage sur les réseaux sociaux par rapport au conteneur de la visionneuse.
left
Position horizontale de l’outil de partage sur les réseaux sociaux par rapport au conteneur de la visionneuse.
width
Largeur de l’outil de partage sur les réseaux sociaux.
height
Hauteur de l'outil de partage sur les réseaux sociaux.

Exemple example

Pour configurer un outil de partage sur les réseaux sociaux qui est positionné à quatre pixels du haut et à cinq pixels de la droite du conteneur de la visionneuse et qui est dimensionné à 28 x 28 pixels.

.s7interactivevideoviewer .s7socialshare {
 top:4px;
 right:5px;
 width:28px;
 height:28px;
}

L’aspect du bouton de l’outil de partage sur les réseaux sociaux est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7socialshare .s7socialbutton

Propriétés CSS du bouton de l’outil de partage sur les réseaux sociaux

background-image
Image affichée pour un état de bouton donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir Sprites CSS.

NOTE
Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur.

Exemple example-1

Pour configurer un bouton de l’outil de partage sur les réseaux sociaux qui affiche une image différente pour chacun des quatre états de bouton différents.

.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}

L’aspect du panneau qui contient les icônes de partage sur les réseaux sociaux individuelles est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

Propriétés CSS du panneau de partage social

background-color
Couleur d’arrière-plan du panneau.

Exemple example-2

Pour configurer un panneau avec une couleur transparente :

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel {
 background-color: transparent;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8