O componente Botão de imagem

Esse componente não é compatível com anúncios HTML para AMP, anúncios em vídeo nem com anúncios gráficos.

O componente Botão de imagem é um botão com três estados visuais:

• Acima da imagem: indica a imagem padrão quando o usuário não está interagindo com o botão.
• Sobre a imagem: indica a imagem quando o usuário passa o cursor sobre o botão.
• Abaixo da imagem: indica a imagem quando o usuário clica no botão.

Isso permite criar um botão visualmente reativo com a especificação de três imagens.

Para usar o componente Botão de imagem no seu projeto:

1. Abra o painel Componentes e a pasta Interação.
2. Arraste o componente Botão de imagem para o cenário.
3. Na seção propriedades do componente Botão de imagem do painel Propriedades, insira os URLs para Acima da imagem, Sobre a imagem e Abaixo da imagem. Se o arquivo de origem da imagem for local, clique no botão Procurar para selecionar a imagem do sistema de arquivos do computador.

Propriedades

Propriedade	Descrição
Nome	É o nome do componente.
Imagem "para cima"	É o URL para a imagem do botão no estado não pressionado. Pode se referir a um URL externo ("https://www.google.com/example.jpg") ou a um recurso na biblioteca ("assets/example.jpg"). Pode ser vinculado a dados dinâmicos.
Imagem "sobre"	É o URL para a imagem do botão durante o mouseover ou ao passar o cursor. Pode se referir a um URL externo ("https://www.google.com/example.jpg") ou a um recurso na biblioteca ("assets/example.jpg"). Pode ser vinculado a dados dinâmicos.
Imagem "para baixo"	É o URL para a imagem do botão no estado pressionado. Pode se referir a um URL externo ("https://www.google.com/example.jpg") ou a um recurso na biblioteca ("assets/example.jpg"). Pode ser vinculado a dados dinâmicos.
Contexto	É a cor que é visível caso uma imagem seja menor que a área do componente. Pode ser vinculado a dados dinâmicos.
Alinhamento	Como a imagem é alinhada no componente: center bottom bottom left bottom right left right top top left top right
Dimensionamento	Veja como exibir uma imagem se for um tamanho diferente do componente: Redimensionar imagem para caber: dimensione a imagem no maior tamanho possível dentro da área do componente, sem recortar ou esticá-la. Recortar imagem para preencher: dimensione a imagem no maior tamanho possível para preencher a área do componente sem esticá-la com um recorte na vertical ou na horizontal. Nenhum Esticar imagem para preencher: exibe a imagem completa em toda a área do componente.
Desativado	Desativa o botão. Por padrão, essa propriedade não está marcada.

Eventos e ações

Eventos enviados pelo componente Botão de imagem

Você pode acionar outras ações com base no seguinte evento do componente Botão de imagem:

Evento	Descrição
Botão de imagem carregado	Enviado quando todas as imagens do botão forem carregadas.

Para selecionar um desses eventos na caixa de diálogo Evento, defina o componente Botão de imagem como o destino.

Ações realizadas pelo componente Botão de imagem

As seguintes ações do componente Botão de imagem podem ser acionadas em resposta a outros eventos:

Ação	Opções de configuração
Toggle enable	nenhuma
Set images	Up image source: é o URL do novo atributo "Acima da imagem". Over image source: é o URL do novo atributo "Sobre a imagem". Down image source: é o URL do novo atributo "Abaixo da imagem".

Ao selecionar uma dessas ações na caixa de diálogo Evento, defina o componente Botão de imagem como o destino.

Saiba como configurar eventos.

Visualização

Não é possível visualizar esse componente na interface do Google Web Designer. Para ver como ele fica em ação, clique no botão Visualizar no canto superior direito e visualize o documento no navegador que você preferir.