Condivisione social

Ultimo aggiornamento: 2023-05-22
  • Argomenti:
  • Dynamic Media Classic
    Visualizza ulteriori informazioni su questo argomento
  • Viewers
    Visualizza ulteriori informazioni su questo argomento
  • SDK/API
    Visualizza ulteriori informazioni su questo argomento
  • Interactive Videos
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
    User

Per impostazione predefinita, lo strumento condivisione social viene visualizzato nell'angolo in alto a destra. È costituito da un pulsante e da un pannello che si espande quando l’utente fa clic o tocca un pulsante e contiene singoli strumenti di condivisione.

La posizione e le dimensioni dello strumento di condivisione social network nell’interfaccia utente del visualizzatore sono controllate da quanto segue:

.s7interactivevideoviewer .s7socialshare

Proprietà CSS dello strumento condivisione social

top

Posizione verticale dello strumento di condivisione social network rispetto al contenitore del visualizzatore.

left

Posizione orizzontale dello strumento di condivisione social network rispetto al contenitore del visualizzatore.

width

Larghezza dello strumento di condivisione social.

height

Altezza dello strumento di condivisione social.

Esempio

Per impostare uno strumento di condivisione social che sia posizionato a quattro pixel dall’alto e a cinque pixel dalla destra del contenitore visualizzatore e sia ridimensionato a 28 x 28 pixel.

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

L’aspetto del pulsante dello strumento Condivisione social è controllato dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

Proprietà CSS del pulsante dello strumento condivisione social

background-image

Immagine visualizzata per un determinato stato del pulsante.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente.

Esempio

Per impostare un pulsante dello strumento di condivisione social network che mostri un'immagine diversa per ciascuno dei quattro diversi stati dei pulsanti.

.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’aspetto del pannello che contiene le singole icone di condivisione social è controllato dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

Proprietà CSS del pannello Condivisione social

background-color

Colore di sfondo del pannello.

Esempio

Per impostare un pannello in modo che presenti un colore trasparente:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel {
 background-color: transparent;
}

In questa pagina