The Image Button component

This component is not supported for AMPHTML ads, video ads or image ads.

The Image Button component is a button with three visual states:

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 colour 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. center bottom bottom left bottom right left right top top left top right
Scaling	How to display an image if it's a different size from the component: Resize image to fit – Scale the image as large as possible within the component area without cropping or stretching. Crop image to fill – Scale the image as large as possible to fill the component area without stretching the image, cropping the image either vertically or horizontally. None Stretch image to fill – display the full image within the entire component area.
Disabled	Disables the button. Unticked by default.

Events and actions

Events sent by the Image Button component

You 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 dialogue, set the Image Button component as the target.

Actions performed by the Image Button component

The following Image Button component actions can be triggered in response to other events:

Action	Configuration options
Toggle enable	none
Set images	Up image source – URL of the new Up image. Over image source – URL of the new Over image. Down image source – URL of the new Down image.

When you select one of these actions in the Event dialogue, 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.

Was this helpful?

How can we improve it?