Il componente Pulsante immagine

Questo componente non è supportato per gli annunci HTML AMP, gli annunci video o gli annunci illustrati.

Il componente Pulsante immagine è un pulsante con tre stati visivi:

• Immagine pulsante non premuto: l'immagine predefinita mostrata quando l'utente non interagisce con il pulsante.
• Immagine pulsante mouseover: l'immagine mostrata quando il puntatore dell'utente è posizionato sopra il pulsante.
• Immagine pulsante premuto: l'immagine mostrata quando l'utente fa clic sul pulsante.

Questo componente ti consente di creare un pulsante con grafica reattiva semplicemente specificando tre immagini.

Per utilizzare il componente Pulsante immagine nel tuo progetto:

1. Apri il riquadro Componenti, quindi la cartella Interazione.
2. Trascina il componente Pulsante immagine  sullo stage.
3. Nella sezione di proprietà Pulsante immagine del riquadro Proprietà, inserisci gli URL nei campi Immagine pulsante non premuto, Immagine pulsante mouseover e Immagine pulsante premuto. Se il file di origine dell'immagine è memorizzato in locale, fai clic sul pulsante Sfoglia  nel campo per selezionare l'immagine dal file system del computer.

Proprietà

Proprietà	Descrizione
Nome	Il nome del componente.
Immagine pulsante non premuto	L'URL dell'immagine del pulsante in stato non premuto. Può fare riferimento a un URL esterno ("https://www.google.com/example.jpg") o a un asset nella Raccolta ("assets/example.jpg"). Associabile a dati dinamici.
Immagine pulsante mouseover	L'URL dell'immagine del pulsante in stato mouseover o al passaggio del puntatore del mouse. Può fare riferimento a un URL esterno ("https://www.google.com/example.jpg") o a un asset nella Raccolta ("assets/example.jpg"). Associabile a dati dinamici.
Immagine pulsante premuto	L'URL dell'immagine del pulsante in stato premuto. Può fare riferimento a un URL esterno ("https://www.google.com/example.jpg") o a un asset nella Raccolta ("assets/example.jpg"). Associabile a dati dinamici.
Colore sfondo	Il colore visibile se un'immagine è più piccola dell'area del componente. Associabile a dati dinamici.
Allineamento	Tipo di allineamento dell'immagine all'interno del componente. center bottom bottom left bottom right left right top top left top right
Ridimens.	Modalità di visualizzazione di un'immagine se ha dimensioni diverse rispetto al componente: Ridimensiona immagine per adattarla. L'immagine viene ridimensionata all'interno dell'area del componente cercando di mantenerla più grande possibile senza ritagliarla o estenderla. Ritaglia immagine per riempire lo spazio. L'immagine viene ridimensionata in modo da riempire l'area del componente cercando di mantenerla più grande possibile senza estenderla, ma ritagliandola in orizzontale o verticale. Nessuno Estendi immagine per riempire lo spazio. Viene mostrata l'immagine completa all'interno dell'intera area del componente.
Disattivato	Consente di disattivare il pulsante. La proprietà è deselezionata per impostazione predefinita.

Eventi e azioni

Eventi inviati dal componente Pulsante immagine

Puoi attivare altre azioni basate sul seguente evento del componente Pulsante immagine:

Evento	Descrizione
Pulsante immagine caricato	Inviato quando tutte le immagini dei pulsanti sono state caricate.

Per selezionare questo evento nella finestra di dialogo Evento, imposta il componente Pulsante immagine come target.

Azioni eseguite dal componente Pulsante immagine

Le seguenti azioni del componente Pulsante immagine possono essere attivate in risposta ad altri eventi:

Azione	Opzioni di configurazione
Toggle enable	nessuna
Set images	Up image source: l'URL della nuova immagine del pulsante in stato non premuto. Over image source: l'URL della nuova immagine del pulsante in stato mouseover. Down image source: l'URL della nuova immagine del pulsante in stato premuto.

Se selezioni una di queste azioni nella finestra di dialogo Evento, imposta il componente Pulsante immagine come destinatario.

Scopri come configurare gli eventi.

Anteprima

Non è possibile visualizzare in anteprima questo componente nell'interfaccia di Google Web Designer. Per vedere il componente in azione, visualizza l'anteprima del documento nel tuo browser preferito facendo clic sul pulsante Anteprima nell'angolo in alto a destra.