Наразі ця сторінка недоступна вашою мовою. Ви можете вибрати іншу мову внизу екрана або миттєво перекласти будь-яку веб-сторінку потрібною мовою за допомогою вбудованої функції перекладу Google Chrome.

Компонент "Графическая кнопка"

Этот компонент не поддерживается в объявлениях AMPHTML, видеорекламе и графических объявлениях.

Компонент "Графическая кнопка" может иметь три состояния.
  • Кнопка не нажата – стандартное изображение, которое показывается, если пользователь не взаимодействует с кнопкой.
  • На кнопку наведен указатель – изображение, которое показывается, если пользователь наводит курсор на кнопку.
  • Кнопка нажата – изображение, которое показывается, если пользователь нажимает кнопку.

Этот компонент позволяет создать кнопку на основе трех изображений, внешний вид которой меняется при взаимодействии.

Как использовать в проекте компонент "Графическая кнопка"

  1. Откройте панель компонентов, а затем папку Взаимодействие.
  2. Перетащите компонент Графическая кнопка в рабочую область.
  3. На панели Свойства в разделе компонента Графическая кнопка введите URL изображений для состояний Кнопка не нажата, На кнопку наведен указатель и Кнопка нажата. Чтобы использовать локальный файл изображения, нажмите кнопку Обзор и выберите файл на компьютере.

Свойства

Свойство Описание
Название Название компонента.
Кнопка не нажата URL изображения кнопки, когда она не нажата. Может ссылаться на внешний URL (https://www.google.com/example.jpg) или объект в библиотеке (assets/example.jpg). Можно связать с динамическими данными.
На кнопку наведен указатель URL изображения кнопки, когда на нее наведен указатель. Может ссылаться на внешний URL (https://www.google.com/example.jpg) или объект в библиотеке (assets/example.jpg). Можно связать с динамическими данными.
Кнопка нажата URL изображения кнопки в нажатом состоянии. Может ссылаться на внешний URL (https://www.google.com/example.jpg) или объект в библиотеке (assets/example.jpg). Можно связать с динамическими данными.
Фон Цвет фона, который виден, если изображение меньше, чем область компонента. Можно связать с динамическими данными.
Выравнивание

Выравнивание изображения внутри компонента:

  • center
  • bottom
  • bottom left
  • bottom right
  • left
  • right
  • top
  • top left
  • top right
Масштаб

Вы можете выбрать параметр отображения изображений, размер которых отличается от компонента.

  • Вписать по размеру: изображение масштабируется так, чтобы оно максимально соответствовало области компонента без кадрирования или растяжения.
  • Кадрировать: изображение масштабируется так, чтобы оно максимально соответствовало области компонента без растяжения. При этом оно может быть обрезано по вертикали или горизонтали.
  • Нет
  • Растянуть по размеру. Изображение показывается полностью. При этом оно растягивается, заполняя всю область компонента.
Отключено Отключает кнопку. По умолчанию флажок снят.

События и действия

События, отправляемые компонентом "Графическая кнопка"

Перечисленные ниже события компонента "Кнопка изображения" могут инициировать другие действия.

Событие Описание
Графическая кнопка загружена Отправляется, когда все изображения кнопки загружены.

Чтобы выбрать одно из этих событий в диалоговом окне Событие, установите компонент "Графическая кнопка" как цель.

Действия, выполняемые компонентом "Графическая кнопка"

Другие события могут вызывать действия в компоненте "Кнопка изображения".

Действие Параметры настройки
Toggle enable Нет
Set images
  • Up image source. URL нового изображения "Кнопка не нажата".
  • Over image source. URL нового изображения "На кнопку наведен указатель".
  • Down image source. URL нового изображения "Кнопка нажата".

Чтобы выбрать одно из этих событий в диалоговом окне Событие, установите компонент "Графическая кнопка" как получатель.

Подробнее о том, как настраивать события

Предварительный просмотр

Этот компонент нельзя просмотреть в интерфейсе Google Web Designer. Чтобы увидеть компонент в действии, просмотрите документ в предпочитаемом браузере, нажав кнопку Предварительный просмотр в правом верхнем углу окна.

Эта информация оказалась полезной?

Как можно улучшить эту статью?
Поиск
Очистить поле поиска
Закрыть поиск
Главное меню
4461143815075970508
true
Поиск по Справочному центру
true
true
true
true
true
5050422
false
false