Componente Botón de imagen

Este componente no se puede utilizar con los anuncios AMP HTML, los anuncios de vídeo ni los anuncios de imagen.

Con el componente Botón de imagen, se crea un botón con tres estados visuales:

• Imagen "Arriba": la imagen que se muestra de forma predeterminada cuando el usuario no interactúa con el botón.
• Imagen "Sobre": la imagen que se muestra cuando el usuario coloca el cursor sobre el botón.
• Imagen "Abajo": la imagen que se muestra cuando el usuario hace clic en el botón.

De esta forma, puede crear un botón que reaccione visualmente con solo especificar tres imágenes.

Para utilizar el componente Botón de imagen en un proyecto, siga estos pasos:

1. Abra el panel Componentes y, luego, la carpeta Interacción.
2. Arrastre el componente Botón de imagen a la escena.
3. En la sección de propiedades del componente Botón de imagen, que se encuentra en el panel Propiedades, introduzca las URLs de Imagen "Arriba", Imagen "Sobre" e Imagen "Abajo". Si el archivo de la imagen en cuestión está guardado localmente, haga clic en el botón Explorar del campo para seleccionar la imagen en el sistema de archivos de su ordenador.

Propiedades

Propiedad	Descripción
Nombre	Nombre del componente.
Imagen "Arriba"	URL de la imagen del botón en el estado sin pulsar. Puede hacer referencia a una URL externa ("https://www.google.com/example.jpg") o a un recurso de la biblioteca ("assets/example.jpg"). Puede estar vinculado con datos dinámicos.
Imagen "Sobre"	URL de la imagen del botón cuando se mueve o coloca el cursor sobre él. Puede hacer referencia a una URL externa ("https://www.google.com/example.jpg") o a un recurso de la biblioteca ("assets/example.jpg"). Puede estar vinculado con datos dinámicos.
Imagen "Abajo"	URL de la imagen del botón en el estado pulsado. Puede hacer referencia a una URL externa ("https://www.google.com/example.jpg") o a un recurso de la biblioteca ("assets/example.jpg"). Puede estar vinculado con datos dinámicos.
Fondo	Color que se ve si la imagen es más pequeña que el área del componente. Puede estar vinculado con datos dinámicos.
Alineación	El modo en que la imagen se alinea dentro del componente: center bottom bottom left bottom right left right top top left top right
Escalado	Cómo mostrar las imágenes que tienen un tamaño diferente al del componente: Modificar el tamaño de la imagen para ajustar: amplía la imagen tanto como sea posible dentro del área del componente sin recortarla ni estirarla. Recortar imagen para rellenar: amplía la imagen tanto como sea posible para rellenar el área del componente sin estirarla, sino recortándola vertical u horizontalmente. Ninguna Estirar imagen para rellenar: muestra la imagen completa dentro del área completa del componente.
Inhabilitado	Esta propiedad inhabilita el botón. Está desmarcada de forma predeterminada.

Eventos y acciones

Eventos que envía el componente Botón de imagen

Puede activar otras acciones en función del siguiente evento del componente Botón de imagen:

Evento	Descripción
Botón de imagen cargado	Se envía cuando todas las imágenes se han cargado.

Para seleccionar uno de estos eventos en el cuadro de diálogo Evento, defina el componente Botón de imagen como objetivo.

Acciones realizadas por el componente Botón de imagen

Las siguientes acciones del componente Botón de imagen pueden activarse como respuesta a otros eventos:

Acción	Opciones de configuración
Toggle enable	Ninguna
Set images	Up image source: URL de la nueva imagen "Arriba". Over image source: URL de la nueva imagen "Sobre". Down image source: URL de la nueva imagen "Abajo".

Cuando seleccione uno de estos eventos en el cuadro de diálogo Evento, defina el componente Botón de imagen como receptor.

Consulte cómo configurar eventos.

Vista previa

No se puede obtener una vista previa de este componente dentro de la interfaz de Google Web Designer. Para ver cómo funciona, obtenga una vista previa del documento en su navegador haciendo clic en el botón Vista previa , situado en la esquina superior derecha.