This component is not supported for AMPHTML ads, video ads, or image ads.
- Up Image - the default image when the user isn't interacting with the button
- Over Image - the image when the user's cursor is hovering over the button
- Down Image - the image when the user clicks the button
This lets you create a visually reactive button simply by specifying three images.
To use the Image Button component in your project:
- Open the Components panel, then the Interaction folder.
- Drag the Image Button component to the stage.
- In the Image Button properties section of the Properties panel, enter the URLs for Up Image, Over Image, and Down Image. If the image source file is local, click the Browse button in the field to select the image from your computer file system.
Properties
Property | Description |
---|---|
Name | The component name. |
Up Image | The URL for the button image in the unpressed state. This can reference an external URL ("https://google.com/example.jpg") or an asset in the Library ("assets/example.jpg"). Can be bound to dynamic data. |
Over Image | The URL for the button image in the mouseover or hover state. This can reference an external URL ("https://google.com/example.jpg") or an asset in the Library ("assets/example.jpg"). Can be bound to dynamic data. |
Down Image | The URL for the button image in the pressed state. This can reference an external URL ("https://google.com/example.jpg") or an asset in the Library ("assets/example.jpg). Can be bound to dynamic data. |
Background | The color that's visible if an image is smaller than the component area. Can be bound to dynamic data. |
Alignment |
How the image is aligned within the component:
|
Scaling |
How to display an image if it's a different size than the component:
|
Disabled | Disables the button. Unchecked by default. |
Events and actions
Events sent by the Image Button componentYou can trigger other actions based on the following Image Button component event:
Event | Description |
---|---|
Image Button loaded | Sent when all of the button images have loaded. |
To select one of these events in the Event dialog, set the Image Button component as the target.
The following Image Button component actions can be triggered in response to other events:
Action | Configuration options |
---|---|
Toggle enable | none |
Set images |
|
When you select one of these actions in the Event dialog, set the Image Button component as the receiver.
Learn how to configure events.
Preview
This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.