De component Afbeeldingsknop

Deze component wordt niet ondersteund voor AMP HTML-advertenties, videoadvertenties of beeldadvertenties.

De component Afbeeldingsknop is een knop met 3 visuele statussen:

• Afbeelding voor niet-ingedrukte knopstand: De standaardafbeelding als de gebruiker geen interactie met de knop heeft.
• Mouseover: De afbeelding als de muisaanwijzer van de gebruiker op de knop is geplaatst.
• Ingedrukte knop: De afbeelding als de gebruiker op de knop klikt.

Zo kunt u een visueel responsieve knop maken door 3 afbeeldingen op te geven.

De component Afbeeldingsknop in uw project gebruiken:

1. Open het deelvenster Componenten en daarna de map Interactie.
2. Sleep de component Afbeeldingsknop  naar het werkvlak.
3. Ga naar het gedeelte met eigenschappen voor Afbeeldingsknop van het deelvenster Eigenschappen en geef de URL's op voor Afbeelding voor niet-ingedrukte knopstand, Mouseover en Ingedrukte knop.Als het videobronbestand lokaal is opgeslagen, klikt u in het veld op Browsen  om de afbeelding te selecteren via het bestandssysteem van uw computer.

Eigenschappen

Eigenschap	Beschrijving
Naam	De componentnaam.
Afbeelding voor niet-ingedrukte knopstand	De URL voor de knopafbeelding als de knop niet is ingedrukt. Dit kan verwijzen naar een externe URL ('https://www.google.com/example.jpg') of een item in de Bibliotheek ('assets/example.jpg'). Kan worden gebonden aan dynamische gegevens.
Mouseover	De URL voor de knopafbeelding als de muisaanwijzer erop wordt geplaatst. Dit kan verwijzen naar een externe URL ('https://www.google.com/example.jpg') of een item in de Bibliotheek ('assets/example.jpg'). Kan worden gebonden aan dynamische gegevens.
Ingedrukte knop	De URL voor de knopafbeelding als de knop is ingedrukt. Dit kan verwijzen naar een externe URL ('https://www.google.com/example.jpg') of een item in de Bibliotheek ('assets/example.jpg'). Kan worden gebonden aan dynamische gegevens.
Achtergrond	De kleur die zichtbaar is als een afbeelding kleiner is dan het componentgebied. Kan worden gebonden aan dynamische gegevens.
Uitlijning	Hoe de afbeelding binnen de component is uitgelijnd. center bottom bottom left bottom right left right top top left top right
Schalen	Hoe een afbeelding wordt weergegeven als deze een ander formaat heeft dan de component: Formaat van afbeelding wijzigen zodat deze past: Schaal de afbeelding zo groot mogelijk binnen het componentgebied zonder bijsnijden of uitrekken. Afbeelding bijsnijden zodat deze past: Schaal de afbeelding zo groot mogelijk om het componentgebied te vullen zonder de afbeelding uit te rekken door de afbeelding verticaal of horizontaal bij te snijden. Geen Afbeelding uitrekken zodat deze past: Geef de volledige afbeelding weer binnen het volledige componentgebied.
Uitgeschakeld	Hiermee wordt de knop uitgeschakeld. Standaard niet aangevinkt.

Gebeurtenissen en acties

Gebeurtenissen die door de component Afbeeldingsknop worden verstuurd

U kunt andere acties activeren op basis van de volgende gebeurtenissen van de component Afbeeldingsknop:

Gebeurtenis	Beschrijving
Afbeeldingsknop geladen	Wordt verstuurd als alle knopafbeeldingen zijn geladen.

Als u een van deze gebeurtenissen wilt selecteren in het dialoogvenster Gebeurtenis, stelt u de component Afbeeldingsknop in als doel.

Acties die door de component Afbeeldingsknop worden uitgevoerd

De volgende acties voor de component Afbeeldingsknop kunnen worden geactiveerd als reactie op andere gebeurtenissen:

Actie	Configuratieopties
Toggle enable	geen
Set images	Up image source: De URL van de nieuwe afbeelding voor niet-ingedrukte knop. Over image source: De URL van de nieuwe afbeelding voor mouseover. Down image source: de URL van de nieuwe afbeelding voor ingedrukte knop.

Als u een van deze acties selecteert in het dialoogvenster Gebeurtenis, stelt u de component Afbeeldingsknop in als ontvanger.

Meer informatie over hoe u gebeurtenissen configureert.

Voorbeeld

U kunt geen voorbeeld van deze component bekijken in de Google Web Designer-interface. Als u de component in actie wilt zien, bekijkt u een voorbeeld van uw document in uw voorkeursbrowser. Klik rechtsboven op de knop Voorbeeld .