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 Componentspanel, then the Interactionfolder.
Drag the Image Button component to the stage.
In the Image Buttonproperties section of the Propertiespanel, 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://www.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://www.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://www.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:

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 than 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. Unchecked 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 Eventdialog, 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 Eventdialog, 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 Previewbutton in the upper right corner.

Was this helpful?

How can we improve it?