Este componente no se puede utilizar con los anuncios AMP HTML, los anuncios de vídeo ni los anuncios de imagen.
- 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:
- Abra el panel Componentes y, luego, la carpeta Interacción.
- Arrastre el componente Botón de imagen a la escena.
- 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:
|
Escalado |
Cómo mostrar las imágenes que tienen un tamaño diferente al 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 imagenPuede 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.
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 |
|
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.