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 .

Was dit nuttig?

Hoe kunnen we dit verbeteren?

Meer hulp nodig?

Probeer de volgende stappen:

Zoeken
Zoekopdracht wissen
Zoekfunctie sluiten
Google-apps
Hoofdmenu
2860907900697309797
true
Zoeken in het Helpcentrum
true
true
true
true
true
5050422
false
false
false
false